Sözde elemanlar için tek veya çift kolon gösterimi kullanmalı mıyım?


108

IE7 ve IE8 sözde öğeler için çift iki nokta gösterimini desteklemediğinden (örn. ::afterVeya ::first-letter) ve modern tarayıcılar :aftergeriye dönük uyumluluk için tek iki nokta gösterimini (örn. ) Desteklediğinden, yalnızca tek iki nokta gösterimini kullanmalı mıyım ve ne zaman IE8'in pazar payı ihmal edilebilir bir seviyeye düşüyor, kod tabanımda geri dön ve bul / değiştir? Yoksa ikisini de eklemeli miyim:

.foo:after,
.foo::after { /*styles*/ }

Tek başına çift kullanmak, IE8 kullanıcılarını önemsiyorsam (zavallılar) aptalca görünüyor.

Yanıtlar:


71

Do not virgül ile kombine hem kullanın. CSS 2.1 uyumlu (CSS3 uyumlu olmayan) bir kullanıcı aracısı, tüm kuralı göz ardı edecektir:

Bir kullanıcı aracısı seçiciyi ayrıştıramadığında (yani, geçerli CSS 2.1 olmadığında), seçiciyi ve aşağıdaki bildirim bloğunu (varsa) da göz ardı etmelidir.

CSS 2.1, seçicilerdeki virgül (,) için özel bir anlam verir. Bununla birlikte, virgülün CSS'nin gelecekteki güncellemelerinde başka anlamlar alıp almayacağı bilinmediğinden, seçicinin geri kalanı CSS 2.1'de makul görünse bile, seçicide herhangi bir hata varsa, tüm ifade göz ardı edilmelidir.

http://www.w3.org/TR/CSS2/syndata.html#rule-sets

Ancak kullanabilirsin

.foo:after { /*styles*/ }
.foo::after { /*styles*/ }

Öte yandan bu, gerekenden daha ayrıntılıdır; şimdilik, tek iki nokta işaretine bağlı kalabilirsiniz.


7
Virgüldeki bilgileri eklediğiniz ve görmezden geldiğiniz için teşekkürler. Bu muhtemelen beni (ve belki başkalarını) bir süre kafaları kaşıyacaktı. Görünüşe göre, kullanılan tarayıcıların% 99'u çift iki nokta gösterimini desteklediğinde en iyi şey bunu kullanmaya geçmektir ve (çünkü kimse tek iki nokta üst üste desteğini bırakıp ağı bozmayacaktır, bu nedenle daha sonra bul / o noktada eski kodu değiştirmek).
jinglesthula

2
İleriye giden yol bu değil. İnsanlar eski, bozuk ve kullanımdan kaldırılmış tarayıcılara saldırmayı bırakırsa, tarayıcı ilerlemesi zorla hızlandırılacaktır.
Gershom

2
@Gershom Maes: Maalesef bunu söylemen size göre değil. Bence geliştiricilerin büyük bir kısmı aynı şeyi umuyor, ancak bu olmayacak.
BoltClock

@Gershom Maes hayal edebiliriz
James Cushing

1
Yinelenen stilleri korumanın sorunlu olabileceğini belirtmenin önemli olduğunu düşünüyorum. CHao'nun aşağıda belirttiği gibi, yinelenen kod birbirinden ayrılmayı sever. Çoğu geliştiricinin yemin etmek için muhtemelen birkaç kez ısırılması gerekiyor :)
jinglesthula

62

Gönderen CSS3 Seçiciler REC :

Bu :: notasyonu, sözde sınıflar ve sözde öğeler arasında bir ayrım oluşturmak için mevcut belge tarafından tanıtılmıştır.
Mevcut stil sayfalarıyla uyumluluk için, kullanıcı aracılarının CSS düzey 1 ve 2'de tanıtılan sözde öğeler için önceki tek iki nokta gösterimini de kabul etmesi gerekir (yani: ilk satır,: ilk harf,: öncesi ve: sonrası).
Bu şartnamede tanıtılan yeni sözde elemanlar için bu uyumluluğa izin verilmez .

Kullanıcı arabirimleri geriye dönük olarak uyumlu olması gerektiğinden CSS2.1'de zaten var olan sözde öğeler için (yalnızca) tek iki nokta gösterimini kullanmak güvenli görünüyor.


1
Kayıt için, bu cevap eşit derecede doğru olarak işaretlenebilir. Orijinal sorunun itici gücü özellikle sözde unsurlardan önce ve sonra olsa da, bazı değerli bakış açıları sağlar. Eklediğiniz için teşekkürler.
jinglesthula

Nasıl bu kanıya vardın? Tam tersi sonuca vardım ... Yeni sözde elemanlar için tek iki nokta üst üste kullanılmasına izin verilmeyecekse , alışkanlık kazanmak için çift iki nokta üst üste kullanmaya başlamanız gerekmez mi?
andrewtweber

@andrewtweber orijinal soru bağlamında (IE8) double kullanmak CSS'yi bozacaktır. Bununla birlikte, bu yazı itibariyle çoğu site muhtemelen IE8 kullanımını önemli bir düşüş olmadan ikiye katlamaya izin verecek kadar düşük bir seviyede görüyor. Tarayıcı satıcılarının tek gösterimi kalıcı olarak destekleyeceğine güvenilebilir, ancak bu noktada kodlama alışkanlıklarını değiştirmede yanlış bir şey yoktur.
jinglesthula

@andrewtweber +1 OP için Evet, IE8 2012'de hesaba katılacaktı ve - YMMV - hala 2015'te büyük B2B projelerinde ve benzerlerinde ama diğer web projelerinde değil. Her iki notasyon da bu var olan sözler için mükemmel bir şekilde geçerlidir. CSS küçültme, tek iki nokta işaretini kullanarak 1 bayt kazanacaktır. Her zaman bir notasyonu kullanmak ve diğerini yasaklamak istiyorsanız, bu, takımınızla bunu yapmakta tamamen özgür olduğunuz bir konvansiyondur, ancak bu bir TAVSİYE değildir.
FelipeAls

@jinglesthula ve Felipe, haklısınız, tarihi fark etmedim. Belki de yanıtın güncellenmesi gerekir, çünkü bu soru arama sonuçlarında üst
sıralarda çıkmaktadır

22

Bir iki nokta üst üste "güvenli" kullanımı konusunda @mddw ve @FelipeAls'a kesinlikle katılmıyorum.

Bu "kullanımdan kaldırılmış olsa bile kullanacağım" mantığı, tarayıcı tabanlı teknolojilerin ilerleme ve ilerlemede bu kadar yavaş olmasının tam olarak nedenidir.

EVET, eski standartlarla uyumluluğu sürdürmek istiyoruz. Kabul edelim, bize dağıtılan el. ANCAK bu, mevcut standartları görmezden gelerek, kullanımdan kaldırılanlar lehine gelişiminizde tembel olmak için bir bahaneniz olduğu anlamına gelmez.

Hedef, eski standardın mümkün olduğunca çoğunu desteklerken mevcut standartlarla uyumluluğu sürdürmek olmalıdır.

Sözde öğeler :CSS2 ve ::CSS3'te kullanılıyorsa, birini veya diğerini kullanmamalıyız; ikisini de kullanmalıyız .

Sorulan orijinal soruyu tam olarak yanıtlamak için, sürüm 2 için eski desteği korurken, en güncel CSS uygulamasını (sürüm 3) desteklemek için aşağıdaki en uygun yöntemdir.

.foo:after {
  /* styles */
}
.foo::after {
  /* same styles as above. */
}

3
Bence tarayıcı satıcılarının, tarayıcılarının 'doğru' işlemesini istedikleri için gerçekçi olarak asla güncellenmeyecek olan kod miktarı nedeniyle eski gösterimi süresiz olarak desteklemeye devam edeceklerini varsaymak oldukça güvenli. Öte yandan stillerin ayrı kopyalarının tutulması KURU kırmızı bayrağını yükseltir diye düşünüyorum. IE7 pazar payı düşene kadar tek iki nokta işaretini kullanmanın tembellikten daha pragmatik olduğunu düşünüyorum. Bununla birlikte, web'in herkes kadar ilerlemesini istiyorum!
jinglesthula

9
Cevabıma " kesinlikle katılmıyorsanız ", o zaman bir W3C Tavsiyesindeki zorunluluk kelimesine kesinlikle katılmıyorsunuz demektir. " Out golü. Olabildiğince eski standardın kadar destek verirken, mevcut standartlara uygunluğu sağlamak için olmalıdır REC bu bölümünde ele varlıktır budur" ve açıkça UAs hem gösterimler kullanmaya yazarları zorlama yapması devletler ve bunun bu UA'lar tarafından nasıl yapılması gerektiğini açıklar. Bu konuda sorun yaşamıyorsanız CSS WG posta listesiyle iletişime geçmekten çekinmeyin (veya Twitter'da @glazou bu Çalışma Grubunun eş başkanı)
FelipeAls

4
Cevabınızın tamamına katılmıyorum, sadece tek bir iki nokta üst üste kullanımının "güvenli" olduğu konusunda. yeni sözde öğeler için uyumluluğa izin verilmez, gelecekteki herhangi bir sözde öğenin yalnızca içinde uygulanacağı anlamına gelir ::. Senin yaklaşıma göre, bireyler daha sonra mix ve maç başlar kullanımını edecek :ve ::sözde elemanları. Açıkça eski standarda bağlı kalmak (şimdilik desteklenebilir) doğası gereği kötü bir uygulamadır ve makul olarak mümkün olduğunda kaçınılmalıdır. Bu ifadeye katılmıyorsanız, biz sadece farklı görüşlere sahibiz.
Joshua Burns

4
Uyumluluk bir hedefse, açıkça uyumlu bir standarda bağlı kalmak doğal olarak kötü bir uygulama değildir . Öte yandan, her iki yolu da kullanmak stillerin kopyasını oluşturmak için - ve bir süredir kod yazmış olan herkesin bildiği gibi, çoğaltılmış kod birbirinden ayrılmayı sever.
cHao

8
@JoshuaBurns Eğer selefim gelecekteki hayali bir tehdide karşı koruma sağlamak için bir sürü kodu kopyalamış olsaydı, kendimi çok daha "berbat" hissederdim.
Mark Amery

2

Bununla birlikte, hem yeni javascript hem de CSS için çoklu dolgular kullanmak giderek daha popüler hale geldi , bu nedenle yalnızca yeni çift kolon ( ::) sözdizimini kullanmaya devam etmek ve gerekli olduğu sürece eski tarayıcılar için bir çoklu dolguyu sürdürmek isteyebilirsiniz .


Bu aslında sadece bir meta cevaptır; herhangi bir yararlı bilgi sağlamaz. Bir yanıtın süresi geçmişse, olumsuz oy verin ve / veya böyle olduğunu belirten yorum yapın.
TylerH

2
neden bu tür bir çoklu dolguyu bağlamayalım ki, daha fazla google'da arama yapmadan kullanabilelim?
MightyPork

4
eh, ilk bölüm meta olabilir, ancak ikinci bölümün iyi bir cevap olduğunu düşünüyorum. Çalıştığım yerde bir ön işlemci ve / veya çoklu dolgular kullanmıyoruz, bu nedenle kabul edilen cevap benim için çalışıyor. Ancak bu tür araçları kullanan herhangi bir mağaza veya geliştirici için bu yanıt muhtemelen daha yararlıdır.
jinglesthula

1

Browser Stats'e göre değeri ne olursa olsun IE 8.0, geçtiğimiz yıl ABD'de% 1'in altına düştü.

http://gs.statcounter.com/browser-version-partially-combined-market-share/desktop/united-states-of-america/#monthly-201512-201612

Aralık 2015'te IE 8.0 , pazarın % 2,92'sine sahipti . Aralık 2016'da IE 8.0 , pazarın % 0,77'sine sahipti .

Bu düşüş hızında, IE'nin eski sürümlerini desteklemeyi bırakmak ve Sözde Elemanlar için :: kullanmaya başlamak en kötü fikir olmaz.


Hangisi kutlanacak bir şey :) Yine duruma bağlı olduğunu da belirtmekte fayda var. Amazon iseniz, kullanıcılarınızın% 0,5'i sitenizin bozuk olduğunu düşünen bir milyondan fazla müşteriye eşittir. 10 kişilik bir girişim için blog yapıyorsanız, bahisler farklı olabilir.
jinglesthula

Amazon gibi bir kuruluş için kesinlikle doğru. Ancak bu% 0,77, nüfusun tamamına eşit olarak dağılmıyor. Orantısız bir şekilde yaşlılar veya yükseltilemeyen az parası olan insanlar. Tamamen iş açısından bakıldığında, bunlar muhtemelen ideal hedef pazarlar değildir. Dolayısıyla çoğu şirket için% 0,77'lik grup, bu küçük sayının önerdiğinden daha az önemlidir. Ve bu sayı sadece küçülecek.
DR01D

Güzel nokta. Yükseltmenin zorlu bir mücadele olduğu diğer bir grup ise hükümet ve iş grupları yalnızca belirli bir tarayıcı sürümüyle çalışacak uygulamalara büyük ölçüde güveniyor (neyse ki bu şekilde olan gruplar da zamanla azalacak). Hiçbiriniz böyle bir müşteri için kod yazmak zorunda
kalmasın

0

Her iki gösterimi de dahil etmek kesinlikle daha güvenlidir, ancak uzun süre tek gösterimi düşüren herhangi bir tarayıcı göremiyorum, bu nedenle yalnızca tek bir notasyon yeterli olacaktır (geçerli CSS2.)

Kişisel olarak, çoğunlukla alışkanlıkla, yalnızca tek iki nokta işaretini kullanıyorum.


1
Diğer yanıtların netleştirdiği gibi, bundan biraz daha karmaşıktır ve bazı bariz olmayan tuzaklar vardır (örneğin, CSS 3 sözde öğeleri için tek iki nokta işaretini desteklemek, açık bir spesifikasyon ihlalidir, bu nedenle CSS yazarları için akıllıca görünmemektedir. bu seçiciler için tek iki nokta işaretini kullanmak için).
Mark Amery
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.