Kullanıcı aracısı stil sayfası nedir?

499

Google Chrome'daki bir web sayfasında çalışıyorum. Aşağıdaki stillerle doğru şekilde görüntülenir.

table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray;
}

Bu stilleri tanımlamadığımı belirtmek önemlidir. Chrome geliştirici araçlarında, CSS dosya adı yerine kullanıcı aracısı stil sayfası diyor .

Şimdi bir form gönderir ve bazı doğrulama hatası oluşursa, aşağıdaki stil sayfasını alıyorum:

table {
    white-space: normal;
    line-height: normal;
    font-weight: normal;
    font-size: medium;
    font-variant: normal;
    font-style: normal;
    color: -webkit-text;
    text-align: -webkit-auto;
}

table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray;
}

font-sizeBu yeni stiller benim tasarımını rahatsız edicidir. Stil sayfalarımı zorlamanın ve mümkünse Chrome'un varsayılan stil sayfasının tamamen üzerine yazmanın bir yolu var mı?

css  google-chrome 
— Kapil Sharma
kaynak
2
— givanse
7
Ayrıca, Chrome'da (51), doküman türü bildiriminiz olmadığında yalnızca bu iki tablo girişini alacağınızı unutmayın. Aksi takdirde, sadece ikincisini alırsınız.
— John
Daha fazla araçla krom önbelleğini temizleyin -> Tarama verilerini temizle
— doford
2
İlgili yazı burada . Kullanıcı aracısı (veya tarayıcı) stil sayfasının kullanıcı ve yazar stil sayfalarından nasıl farklı olduğunu anlamak, işleri kolayca kavramsallaştırmaya yardımcı olacaktır.
— RBT

Yanıtlar:

251

Hedef tarayıcılar nelerdir? Farklı tarayıcılar farklı varsayılan CSS kuralları belirler. Bu varsayılanları kaldırmak için meyerweb CSS sıfırlama veya normalize.css gibi bir CSS sıfırlama eklemeyi deneyin . Farklılıkları görmek için Google "CSS sıfırlama vs normalleştirme".

— Oliver Millington
kaynak
19
Her projeden önce CSS'mi her zaman sıfırlarım / normalleştiririm, böylece tarayıcılarda "neredeyse" düzey alanınız olur. Hiç olumsuz bir "yan etki" duymadım, eminim Google'a hızlı bir bakış varsa tavsiye edilir bulacaksınız.
— Oliver Millington
2
Stilleri sıfırlamak, özellikle alan kenarlıkları veya type = "file" gibi çok parçalı öğeler gibi form alanlarında garip sonuçlara neden olabilir.
— Modlarınıza iyi davranın
7
Sıfırla / normalleştir yardımcı olsa da, kullanıcı aracısı stil sayfasının neden değiştiği sorusuna gerçekten cevap vermiyor? Ben SEO stilleri SEO için kullandığım önceden işlenmiş sayfalar için farklı hale nerede aynı sorun var. Neden değiştiğine dair bir fikrin var mı?
— Yaron
5
Chrome'un varsayılan olarak web sayfasına neleri ayarladığını görün: trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
— Santosh Kumar
10
Bu bir cevap değil ... Eklemek <!DOCTYPE>doğru @Sebas tarafından
— Amit Shah
140

Eğer <!DOCTYPE>HTML içeriğinde eksik tarayıcı sizin özel bir stil üzerinde "kullanıcı aracısı stylesheet" tercih verdiğini karşılaşabilirsiniz. Doküman eklemek bunu düzeltir.

— Jesper Mygind
kaynak
6
Harika bir ipucu. Bana biraz araştırma kazandın. Worth, benim durumumda bu dokümanın beyanını aldığımı ancak daha önce bir senaryom olduğunu belirtti. Görünüşe göre DOCTYPE sayfadaki ilk şey olmalı.
— Sebas
3
<! DOCTYPE> eklemek çok garip bir tr / td dikey hizalama problemi çözdü. Bu cevap için teşekkürler.
— Ralph Tee
3
Bu çok titiz, ama <! DOCTYPE html> benim için sorunu çözdü.
— Steve Zelaznik
8
Ben <! DOCTYPE html> etkin vardı ama yine de normalleştirmek zorunda kaldı.
— antikbd
1
@ChrisMorgan, bağlandığınız spesifikasyondan alıntı yapıyor: "Eski nedenlerden dolayı DOCTYPE'ler gereklidir. Atlandığında, tarayıcılar bazı spesifikasyonlarla uyumlu olmayan farklı bir oluşturma modu kullanma eğilimindedir. Bir dokümana DOCTYPE eklemek, tarayıcının bir msgstr "ilgili spesifikasyonları takip etmek için en iyi çaba". İdeal bir dünyada DOCTYPE gerekli değildir. Ancak cevabın "sadece doğru değil" iddiası oldukça cesur IMHO, özellikle de oyların sayısı göz önüne alındığında.
— Jesper Mygind
104

“Kullanıcı aracısı tarzı sayfası” kavramı ile ilgili olarak, CSS 2.1 spesifikasyonundaki Cascade bölümüne bakın .

Kullanıcı aracısı stil sayfaları, kendi stil sayfanızda belirlediğiniz herhangi bir şey tarafından geçersiz kılınır. Bunlar sadece en alttalar: sayfa veya kullanıcı tarafından sağlanan stil sayfalarının yokluğunda, tarayıcının hala içeriği bir şekilde oluşturması gerekir ve kullanıcı aracısı stil sayfası bunu açıklar.

Dolayısıyla, bir kullanıcı aracısı stil sayfasıyla ilgili bir sorununuz olduğunu düşünüyorsanız, işaretlemenizle veya stil sayfanızla veya her ikisiyle (gerçekten hakkında hiçbir şey yazmadığınız) bir sorun yaşarsınız.

— Jukka K. Korpela
kaynak
@givanse, hayır, onları geçersiz kılmadığınızda kullanıcı aracısı stil sayfası efektlerini görüyorsunuz ve örnek işaretlemeniz istisna değil. Yalnızca metin içeriğine sahip liiki öğe içeren bir öğe olarak ayrıştırılacaktır ul; kullanıcı aracısı stil sayfası tarafından stillendirilir, ancak bu stil geçersiz kılınabilir. (İşaretlemenin geçersiz olup olmadığı bağlama ve HTML sürümüne bağlıdır; ancak bu, stili etkilemez.)
— Jukka K. Korpela 30:14
@givanse, bu sorun “kullanıcı stil sayfası nedir” sorusuyla ilgili değildir. Sorunun önemli olduğunu düşünüyorsanız, yeterli ayrıntılarla yeni bir soru olarak gönderin. Ancak jsfiddle'ınızdaki mermi, liöğe için basit bir mermidir ve stil sayfanız bunu geçersiz kılmaz.
— Jukka K. Korpela
47

İlk satırdaki uygun dokümanda dokümanı HTML5 olarak işaretlemek sorunumu çözdü.

<!DOCTYPE html>
<html>...
— Daniel
kaynak
8
Tam olarak nasıl çalışması gerektiğini açıklayabilir misiniz? HTML 5 tanımsız stillerle nasıl ilişkilendirilir? Onaylayacağım ama onaylamak için hazır bir keman var mı?
— Kapil Sharma
28

Bir kullanıcı aracısı stil sayfası, sayfayı "genel sunum beklentilerini" karşılayacak şekilde sunmak için tarayıcı tarafından sağlanan (ör. Chrome, Firefox, Edge vb.) Bir "varsayılan stil sayfasıdır". Örneğin, varsayılan bir stil sayfası, yazı tipi boyutu, kenarlıklar ve öğeler arasındaki boşluk gibi şeyler için temel stiller sağlar. Tarayıcılar arasındaki tutarsızlıklarla başa çıkmak için bir sıfırlama stil sayfası kullanmak yaygındır .

Şartnameden ...

Kullanıcı aracısının varsayılan stil sayfası, belge dili öğelerini, belge dili için genel sunum beklentilerini karşılayacak şekilde sunmalıdır. Sinemalar.com ~ Resimler ~ Kaskat .

Genel olarak kullanıcı aracıları hakkında daha fazla bilgi için, bkz. Kullanıcı aracısı .

— Kenneth Stoddard
kaynak
15

Başlığında soruyu cevaplayan, kullanıcı aracısı stil sayfası nedir, tarayıcıdaki varsayılan stiller kümesi: İşte bunlardan bazıları (ve bugünün webindeki en alakalı olanlar):

Kişisel görüş: Onlarla savaşmayın. Örneğin rtl / bidi durumlarda iyi varsayılan değerlere sahiptirler ve günümüzde tutarlıdırlar. Sizinle alakasız gördüğünüz şeyi bir kerede sıfırlayın.

— Ebrahim Byagowi
kaynak
12

Kendi CSS içeriğinizde Chrome'un kullanıcı aracısı stilinden kullanılmasını istemediğiniz değerleri tanımlayın.

— benm
kaynak
4

Bazı tarayıcılar .css dosyalarını okumak için kendi yollarını kullanırlar. Bu yüzden bunu yenmenin doğru yolu: Komut satırını doğrudan .html kaynak koduna yazarsanız, bu .css dosyasını yener, bu şekilde tarayıcıya doğrudan ne yapması gerektiğini söylediniz ve tarayıcı okuma pozisyonunda değil .css dosyasındaki komutlar. .Html dosyasında yazılan komutların .css'deki komuttan daha güçlü olduğunu unutmayın.

— rollin_jeksun
kaynak
1

<div> 'den birinin tarayıcı tarafından belirlenen marjı ile aynı sorunu yaşadım. Oldukça can sıkıcıydı ama sonra insanların çoğunun söylediği gibi, bir işaretleme hatası olduğunu anladım.

Geri döndüm ve <head> bölümümü kontrol ettim ve CSS bağlantım aşağıdaki gibiydi:

<link rel="stylesheet" href="ex.css">

Ben dahil typeve aşağıdaki gibi yaptım:

<link rel="stylesheet" type="text/css" href="ex.css">

Sorunum çözüldü.

— Appy Sharma
kaynak
0

Bir HTML dosyasının bir belirtmemesi durumunda her tarayıcı, kullanıcı aracısı stil sayfası adı verilen varsayılan bir stil sayfası sağlar. Belirttiğiniz stiller varsayılanları geçersiz kılar.

Tablo öğesinin kutusu için değer belirtmediğiniz için, varsayılan stiller uygulanmıştır.

— firstpostcommenter
kaynak
0

Sadece Ire Aderinokun'dan okuduğum şeye dayanarak @BenM'in tepkisini genişletmek istedim . Kullanıcı aracısı stil sayfası yararlı varsayılan stil sağladığından, geçersiz kılmadan önce iki kez düşünün.

Bir düğme öğesinin Chrome'da doğru görünmediği yerde aptalca bir hatayla karşılaştım. Kısmen tarz vermiştim, çünkü geleneksel bir düğme gibi görünmesini istemiyordum. Ancak, kenarlık, kenarlık rengi vb.

Ben gibi stiller ekledikten sonra sorun ortadan kalktı border: none.

Başka biri bu sorunu yaşıyorsa, özellikle de kullanıcı aracı stillerini tamamen sıfırlamak istemiyorsanız, sakat gibi göründüğünü fark ederseniz, bir öğe için tüm geçerli varsayılan kullanıcı aracısı stillerini açıkça geçersiz kıldığınızdan emin olun. Benim için çalıştı.

— Brent Miller
kaynak
Bu bir cevap yerine bir yorum olmamalı mı?
— Peter Mortensen
@PeterMortensen evet, ama yorum bırakamıyorum - yeterli itibar.
— Brent Miller
-1

Bir çözümüm var. Şuna göz at:

Hata

<link href="assets/css/bootstrap.min.css" rel="text/css" type="stylesheet">

Doğru 

<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
— Vinkal Chandel
kaynak
2
Bunun nasıl çalıştığını ve neden yardımcı olduğunu açıklamak için lütfen düzenleyin.
— Yunnosch
-6

Aşağıdaki kodu CSS dosyanıza ekleyin:

table {
    font-size: inherit;
}
— Srikanth
kaynak
2
Bu, bu gönderiye yeni bir şey eklemiyor. Zaten kabul edilmiş bir cevap ve diğer 5 cevap var, bu yüzden lütfen geç cevap göndermeyin.
— Kaspar Lee
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.