Haruskah saya menggunakan notasi titik dua tunggal atau ganda untuk elemen semu?

108

Karena IE7 dan IE8 tidak mendukung notasi titik dua ganda untuk elemen semu (misalnya ::afteratau ::first-letter), dan karena browser modern mendukung notasi titik dua (misalnya :after) untuk kompatibilitas mundur, sebaiknya saya hanya menggunakan notasi titik dua tunggal dan kapan Pangsa pasar IE8 turun ke tingkat yang dapat diabaikan kembali dan temukan / ganti di basis kode saya? Atau haruskah saya memasukkan keduanya:

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

Menggunakan ganda saja tampaknya konyol jika saya peduli dengan pengguna IE8 (sayang malang).

css internet-explorer-8 css-selectors internet-explorer-7 pseudo-element jinglesthula.dll
sumber

Jawaban:

71

Jangan tidak menggunakan kedua dikombinasikan dengan koma. Agen pengguna yang mematuhi CSS 2.1 (tidak mampu CSS3) akan mengabaikan seluruh aturan:

Ketika agen pengguna tidak dapat mengurai selektor (yaitu, CSS 2.1 yang tidak valid), ia harus mengabaikan pemilih dan blok deklarasi berikut (jika ada) juga.

CSS 2.1 memberikan arti khusus pada koma (,) pada selektor. Namun, karena tidak diketahui apakah koma dapat memperoleh arti lain dalam pembaruan CSS di masa mendatang, seluruh pernyataan harus diabaikan jika ada kesalahan di mana pun dalam pemilih, meskipun pemilih lainnya mungkin terlihat wajar di CSS 2.1.

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

Namun Anda bisa menggunakan

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

Di sisi lain, ini lebih bertele-tele dari yang diperlukan; untuk saat ini, Anda dapat menggunakan notasi satu titik dua.

pengguna123444555621
sumber
7
terima kasih telah menyertakan info di koma dan abaikan. Itu mungkin akan membuat saya (dan mungkin orang lain) menggaruk-garuk kepala untuk sementara waktu. Sepertinya hal terbaik ketika 99% browser yang digunakan mendukung notasi titik dua ganda adalah beralih menggunakan itu dan (karena tidak ada yang akan menjatuhkan dukungan titik dua tunggal dan merusak web, jadi tidak ada gunanya untuk menemukan / mengganti kode lama pada saat itu).
jinglesthula
2
Ini bukanlah jalan ke depan. Kemajuan browser akan dipercepat secara paksa jika orang berhenti menggunakan browser yang kuno, rusak, dan usang.
Gershom
2
@ Gershom Maes: Sayangnya, bukan itu yang bisa Anda katakan. Saya pikir sebagian besar pengembang mengharapkan hal yang sama, tetapi itu tidak akan terjadi.
BoltClock
@Gershom Maes kita bisa bermimpi
James Cushing
1
Saya rasa penting untuk dicatat bahwa mempertahankan gaya duplikat bisa menjadi masalah. Seperti yang dicatat cHao di bawah ini, kode duplikat suka menyimpang. Sebagian besar pengembang mungkin harus digigitnya beberapa kali untuk bersumpah :)
jinglesthula
62

Dari CSS3 Selectors REC :

Notasi :: ini diperkenalkan oleh dokumen saat ini untuk menetapkan perbedaan antara pseudo-class dan pseudo-elemen.
Untuk kompatibilitas dengan style sheets yang ada, agen pengguna juga harus menerima notasi satu titik dua sebelumnya untuk pseudo-element yang diperkenalkan di CSS level 1 dan 2 (yaitu,: first-line,: first-letter,: before dan: after).
Ini kompatibilitas tidak diperbolehkan untuk pseudo-elemen baru yang diperkenalkan dalam spesifikasi ini.

Tampaknya Anda aman menggunakan (hanya) notasi satu titik dua untuk elemen pseudo yang sudah ada di CSS2.1 karena UA harus kompatibel dengan versi sebelumnya.

FelipeAls
sumber
1
Sebagai catatan, jawaban ini bisa juga ditandai sebagai benar. Ini memberikan beberapa perspektif yang berharga, meskipun dorongan untuk pertanyaan asli secara khusus adalah elemen semu sebelum dan sesudah. Terima kasih telah menambahkannya.
jinglesthula
Bagaimana Anda sampai pada kesimpulan itu? Saya sampai pada kesimpulan yang berlawanan ... jika titik dua tunggal tidak diizinkan untuk elemen semu baru, bukankah sebaiknya Anda mulai menggunakan titik dua ganda untuk membiasakan diri?
andrewtweber
@andrewtweber dalam konteks pertanyaan asli (IE8) menggunakan double akan merusak CSS. Yang mengatakan, saat tulisan ini dibuat, sebagian besar situs mungkin melihat penggunaan IE8 pada tingkat yang sangat rendah sehingga memungkinkan penggandaan tanpa dampak yang signifikan. Vendor browser dapat diandalkan untuk mendukung notasi tunggal untuk selamanya, tetapi tidak ada yang salah dengan mengubah kebiasaan pengkodean pada saat ini.
jinglesthula
@andrewtweber +1 untuk OP Ya, IE8 akan diperhitungkan pada tahun 2012 dan - YMMV - masih pada tahun 2015 di proyek B2B besar dan serupa tetapi tidak di proyek web lainnya. Kedua notasi tersebut benar-benar valid untuk pseudo yang ada ini. Minifikasi CSS akan mendapatkan 1 byte dengan menggunakan notasi satu titik dua. Jika Anda ingin selalu menggunakan satu notasi dan melarang notasi yang lain, itu adalah konvensi Anda benar-benar bebas melakukannya dengan tim Anda, tetapi itu bukan sebuah REKOMENDASI.
FelipeAls
@jinglesthula dan Felipe, Anda benar, saya tidak memperhatikan tanggalnya. Mungkin jawabannya harus diperbarui, karena pertanyaan ini muncul paling tinggi dalam hasil penelusuran
andrewtweber
22

Saya benar-benar tidak setuju dengan @mddw dan @FelipeAls, sehubungan dengan mempertimbangkan penggunaan satu titik dua "aman".

Mentalitas "Saya akan menggunakannya meskipun sudah usang" inilah yang menyebabkan teknologi berbasis browser sangat lambat dalam kemajuan dan kemajuannya.

YA, kami ingin menjaga kompatibilitas dengan standar lama. Mari kita hadapi itu, ini tangan yang telah kita tangani. TAPI, ini tidak berarti Anda memiliki alasan untuk malas dalam perkembangan Anda, dengan mengabaikan standar saat ini dan mendukung standar yang sudah usang.

Tujuan keluarnya adalah untuk menjaga kepatuhan dengan standar saat ini, sambil mendukung sebanyak mungkin standar warisan.

Jika pseudo-elemen digunakan :di CSS2 dan ::CSS3, kita tidak boleh menggunakan salah satu; kita harus menggunakan keduanya .

Untuk sepenuhnya menjawab pertanyaan asli yang diajukan, berikut ini adalah metode yang paling tepat untuk mendukung implementasi CSS terkini (versi 3), dengan tetap mempertahankan dukungan lama untuk versi 2.

.foo:after {
  /* styles */
}
.foo::after {
  /* same styles as above. */
}
Joshua Burns
sumber
3
Saya pikir cukup aman untuk mengasumsikan bahwa vendor browser akan terus mendukung notasi lama tanpa batas karena jumlah kode yang secara realistis tidak akan pernah diperbarui sehingga mereka ingin browser mereka merender 'dengan benar'. Di sisi lain, mempertahankan salinan terpisah dari gaya menaikkan bendera merah KERING, saya kira. Saya pikir itu lebih pragmatis daripada malas untuk menggunakan notasi titik dua sampai pangsa pasar IE7 turun. Meskipun demikian, saya ingin web terus bergerak maju seperti halnya siapa pun!
jinglesthula
9
Jika Anda " benar-benar tidak setuju " dengan jawaban saya, maka Anda sama sekali tidak setuju dengan kata harus dalam Rekomendasi W3C. " Tujuan keluar harus menjaga kepatuhan dengan standar saat ini, sambil mendukung sebanyak mungkin standar warisan. " Adalah apa yang sedang dibahas oleh bagian REC ini dan secara eksplisit menyatakan bahwa UA tidak boleh memaksa penulis untuk menggunakan kedua notasi dan menjelaskan bagaimana hal ini harus dilakukan oleh UA ini. Jangan ragu untuk menghubungi milis CSS WG jika Anda tidak setuju dengan itu (atau di Twitter @glazou salah satu ketua Kelompok Kerja ini)
FelipeAls
4
Saya tidak setuju dengan seluruh jawaban Anda, hanya menganggap penggunaan titik dua sebagai "aman". kompatibilitas tidak diperbolehkan untuk pseudo-elemen baru yang berarti semua pseudo-elemen masa depan hanya akan diimplementasikan ::. Menurut pendekatan Anda, individu kemudian akan mulai mencampur-dan-mencocokkan penggunaan :dan ::untuk elemen semu. Mematuhi secara eksplisit standar lama (yang untuk sementara mungkin didukung,) merupakan praktik yang pada dasarnya buruk dan harus dihindari jika memungkinkan. Jika Anda tidak setuju dengan pernyataan itu, kami hanya memiliki pandangan yang berbeda.
Joshua Burns
4
Mengikuti standar yang kompatibel secara eksplisit pada dasarnya bukanlah praktik yang buruk, jika kompatibilitas adalah tujuannya. Di sisi lain, menggunakan keduanya mengarah pada gaya duplikat - dan seperti yang diketahui oleh siapa pun yang telah membuat kode untuk sementara, kode duplikat suka menyimpang.
cHao
8
@JoshuaBurns Jika pendahulu saya telah menduplikasi beban kode untuk melindungi dari ancaman masa depan imajiner, saya akan merasa jauh lebih "kacau".
Mark Amery
2

Namun, semakin populer menggunakan polyfill untuk javascript dan CSS baru, jadi Anda mungkin ingin tetap menggunakan ::sintaks double-colon ( ) yang lebih baru, dan mempertahankan polyfill untuk browser lama, selama itu diperlukan.

zpr
sumber
Ini pada dasarnya hanyalah sebuah jawaban meta; itu tidak memberikan informasi yang berguna. Jika sebuah jawaban sudah kadaluwarsa, berikan suara negatif dan / atau komentari jawaban yang menunjukkan hal tersebut.
TylerH
2
kenapa tidak juga menghubungkan polyfill seperti itu, jadi kita bisa menggunakannya tanpa googling lebih lanjut?
MightyPork
4
eh, bagian pertama mungkin meta, tapi menurut saya bagian kedua adalah jawaban yang bagus. Di mana saya bekerja, kami tidak menggunakan preprocessor dan / atau polyfill, jadi jawaban yang diterima cocok untuk saya. Tetapi untuk toko atau pengembang mana pun yang menggunakan alat seperti itu, jawaban ini mungkin lebih berguna.
jinglesthula
1

Untuk apa itu layak menurut Statistik Browser IE 8.0 telah turun menjadi kurang dari 1% di AS selama setahun terakhir.

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

Pada Desember 2015 IE 8.0 memiliki 2,92% pasar. Pada bulan Desember 2016 IE 8.0 memiliki 0,77% dari pasar.

Pada tingkat penurunan itu, bukan ide terburuk untuk berhenti mendukung versi lama IE dan mulai menggunakan :: for Pseudo Elements.

DR01D
sumber
Yang merupakan sesuatu untuk dirayakan :) Perlu juga ditunjukkan bahwa itu masih tergantung pada situasi. Jika Anda Amazon, 0,5% pengguna Anda sama dengan lebih dari satu juta pelanggan yang menganggap situs Anda rusak. Jika Anda membuat blog untuk 10 orang startup, taruhannya mungkin berbeda.
jinglesthula
Benar sekali tentang organisasi seperti Amazon. Tetapi 0,77% itu tidak didistribusikan secara merata ke seluruh populasi. Orang tua yang tidak proporsional atau orang dengan sedikit uang yang tidak dapat meningkatkan. Dari sudut pandang bisnis murni, mereka mungkin bukan target pasar yang ideal. Jadi bagi sebagian besar perusahaan, kelompok 0,77% bahkan kurang signifikan daripada yang ditunjukkan oleh angka kecil itu. Dan angka itu hanya akan semakin kecil.
DR01D
Poin bagus. Kelompok lain di mana peningkatan merupakan perjuangan berat adalah pemerintah dan kelompok bisnis sangat bergantung pada aplikasi yang hanya akan bekerja dengan versi browser tertentu (meskipun untungnya kelompok seperti itu akan berkurang seiring waktu juga). Semoga tidak ada di antara Anda yang harus membuat kode untuk klien seperti itu :)
jinglesthula
0

Menyertakan kedua notasi tentu lebih aman, tetapi saya tidak dapat melihat browser apa pun yang menghapus satu notasi untuk waktu yang lama, jadi hanya satu yang akan baik-baik saja (ini adalah CSS2 yang valid.)

Secara pribadi saya hanya menggunakan notasi titik dua, kebanyakan karena kebiasaan.

mddw
sumber
1
Seperti jawaban lain menjelaskan, ini sedikit lebih rumit dari ini dan ada beberapa jebakan yang tidak jelas (misalnya mendukung notasi titik dua untuk CSS 3 pseudo-elemen adalah pelanggaran eksplisit spesifikasi, jadi tampaknya bijaksana untuk penulis CSS tidak menggunakan notasi titik dua untuk penyeleksi tersebut).
Mark Amery