Cascading Style Sheet

Cascading Style Sheets ( CSS ) adalah bahasa style sheet yang digunakan untuk menggambarkan semantik presentasi (tampilan dan format) dari dokumen yang ditulis dalam bahasa markup . Penerapannya paling umum adalah dengan gaya halaman web yang ditulis dalam HTML dan XHTML , tetapi bahasa juga dapat diterapkan untuk setiap jenis XML dokumen, termasuk polos XML , SVG dan XUL .

CSS dirancang terutama untuk memungkinkan pemisahan konten dokumen (yang ditulis dalam HTML atau bahasa markup yang mirip) dari penampilan dokumen, termasuk unsur-unsur seperti tata letak , warna , dan font .Pemisahan ini dapat meningkatkan konten aksesibilitas , menyediakan lebih banyak fleksibilitas dan kontrol dalam spesifikasi karakteristik presentasi, memungkinkan beberapa halaman untuk berbagi format, dan mengurangi kompleksitas dan pengulangan dalam konten struktural (seperti dengan memungkinkan untuk desain web Tableless ). CSS juga dapat memungkinkan halaman markup yang sama yang akan disajikan dalam gaya yang berbeda untuk metode rendering yang berbeda, seperti di layar, di cetak, dengan suara (ketika dibacakan oleh browser pidato-based atau pembaca layar ) dan Braille berbasis, taktil perangkat. Hal ini juga dapat digunakan untuk memungkinkan halaman web untuk menampilkan secara berbeda tergantung pada ukuran layar atau perangkat yang sedang dilihat. Sementara penulis dokumen biasanya menghubungkan bahwa dokumen ke style sheet CSS, pembaca dapat menggunakan style sheet yang berbeda, mungkin satu di komputer mereka sendiri, untuk menimpa salah satu penulis telah ditentukan.

CSS menetapkan skema prioritas untuk menentukan aturan gaya berlaku jika sesuai aturan lebih dari satu melawan elemen tertentu. Dalam apa yang disebut kaskade , prioritas atau bobot dihitung dan ditugaskan untuk peraturan, sehingga hasilnya dapat diprediksi.

Spesifikasi CSS diselenggarakan oleh World Wide Web Consortium (W3C). Jenis media internet ( tipe MIME ) text / css terdaftar untuk digunakan dengan CSS oleh RFC 2318.

Sintaks

CSS memiliki sederhana sintaks dan menggunakan sejumlah kata kunci Inggris untuk menentukan nama-nama berbagai gaya properti.

Sebuah style sheet terdiri dari daftar aturan . Setiap aturan atau aturan-set terdiri dari satu atau lebih penyeleksi dan sebuah deklarasi blok . Sebuah deklarasi-blok terdiri dari daftar deklarasi di kawat gigi. Setiap deklarasi itu sendiri terdiri dari properti , tanda titik dua ( : ), dan nilai . Jika ada multiple deklarasi di blok, sebuah semi-colon ( ; ) harus dimasukkan untuk memisahkan deklarasi masing-masing.

Dalam CSS, penyeleksi digunakan untuk menyatakan mana dari elemen markup gaya diterapkan, semacam ekspresi pertandingan. Selectors mungkin berlaku untuk semua elemen dari tipe tertentu, atau hanya elemen yang cocok dengan atribut tertentu; elemen dapat disesuaikan tergantung pada bagaimana mereka ditempatkan relatif terhadap satu sama lain dalam kode markup, atau pada bagaimana mereka bersarang di dalam Document Object Model .

Pseudo-class adalah bentuk lain dari spesifikasi yang digunakan dalam CSS untuk mengidentifikasi unsur-unsur markup, dan dalam beberapa kasus, tindakan pengguna tertentu yang mana blok deklarasi tertentu berlaku. Contoh yang sering digunakan dari kelas semu adalah : hover , yang menerapkan gaya hanya bila 'poin untuk' pengguna elemen terlihat, biasanya dengan menekan kursor mouse di atasnya. Hal ini ditambahkan ke pemilih seperti pada a: hover atau # elementid: hover . Lain pseudo-kelas dan pseudo-elemen , misalnya, : lini pertama , : visited atau : sebelum . Sebuah khusus pseudo-class adalah : lang (c) ., "c" [ klarifikasi diperlukan ]

Sebuah kelas pseudo- elemen seluruh memilih, seperti : link atau : visited , sedangkan elemen pseudo- membuat pilihan yang mungkin terdiri dari unsur parsial, seperti : lini pertama atau : pertama-surat .

Selectors dapat dikombinasikan dengan cara lain juga, terutama dalam CSS 2.1, untuk mencapai spesifisitas yang lebih besar dan fleksibilitas. 

Penggunaan

Sebelum CSS, hampir semua atribut presentasional dokumen HTML yang terkandung dalam HTML markup; semua warna font, background, keberpihakan elemen, perbatasan dan ukuran harus secara eksplisit dijelaskan, sering berulang kali, dalam HTML. CSS memungkinkan penulis untuk bergerak jauh dari informasi tersebut untuk file lain, yang disebut style sheet, sehingga dalam HTML cukup sederhana.

Judul ( h1 unsur), sub-judul ( h2 ), sub-sub-judul ( h3 ), dll, didefinisikan secara struktural menggunakan HTML. Di cetak dan di layar, pilihan huruf , ukuran , warna dan penekanan untuk elemen ini presentasi .

Sebelum CSS, dokumen penulis yang ingin menugaskan seperti tipografi karakteristik, katakanlah, semua h2 judul harus menggunakan HTML huruf dan elemen presentasi lain untuk setiap terjadinya jenis pos. Markup presentational tambahan dalam HTML dokumen dibuat lebih kompleks, dan umumnya lebih sulit untuk mempertahankan. Dalam CSS, presentasi dipisahkan dari struktur. Dalam cetak, CSS dapat menentukan warna, font, teks alignment, ukuran, batas, jarak, tata letak dan tipografi banyak karakteristik lainnya. Hal ini dapat melakukannya secara independen untuk di layar dan tampilan cetak. CSS juga mendefinisikan non-visual gaya seperti kecepatan dan penekanan dengan teks yang dibacakan oleh pembaca teks aural. The W3C sekarang menganggap keuntungan dari CSS untuk mendefinisikan semua aspek penyajian halaman HTML menjadi lebih unggul dari metode lain. Oleh karena itu telah usang penggunaan semua markup HTML asli penyajian.

File CSS dimasukkan ke dalam dokumen HTML menggunakan sintaks berikut:

< tautan rel = "stylesheet" href = "http://example.com/css/style.css" jenis = "text / css" / >

[ sunting ] Sumber

CSS informasi dapat diberikan oleh berbagai sumber. CSS informasi gaya dapat berupa dilampirkan sebagai dokumen terpisah atau tertanam dalam dokumen HTML. Beberapa style sheet dapat diimpor. Gaya yang berbeda dapat diterapkan tergantung pada perangkat output yang digunakan, misalnya, versi layar bisa sangat berbeda dari versi cetak, sehingga penulis dapat menyesuaikan presentasi tepat untuk setiap media.

Prioritas skema untuk sumber CSS (dari tertinggi ke prioritas terendah):

Penulis gaya (disediakan oleh penyusun halaman web), dalam bentuk:

Inline style , di dalam dokumen HTML, informasi gaya pada satu elemen, ditentukan dengan menggunakan "gaya" atribut

Tertanam gaya , blok informasi CSS dalam HTML itu sendiri

Style sheet eksternal , yaitu, file CSS terpisah dirujuk dari dokumen

Pengguna style:

Sebuah file CSS lokal pengguna menentukan dengan opsi browser, yang bertindak sebagai menimpa diterapkan untuk semua dokumen

Pengguna agen gaya

Standar gaya yang diterapkan oleh agen pengguna, yaitu, pengaturan default browser untuk presentasi elemen

Style sheet dengan prioritas tertinggi mengontrol tampilan konten. Deklarasi tidak diatur dalam sumber prioritas tertinggi diteruskan ke sumber prioritas rendah, seperti gaya agen pengguna. Proses ini disebut cascading .

Salah satu tujuan dari CSS adalah juga untuk memungkinkan pengguna kontrol yang lebih besar presentasi. Seseorang yang menemukan judul miring merah sulit dibaca mungkin menerapkan style sheet yang berbeda. Tergantung pada browser dan situs web, pengguna dapat memilih dari style sheet yang disediakan oleh para desainer, atau mungkin menghapus semua gaya ditambahkan dan melihat situs menggunakan styling default browser, atau dapat mengganti hanya gaya tajuk merah miring tanpa mengubah lainnya atribut.

Berkas highlightheaders.css berisi:

h1 { color : white ; background-color : orange penting! ; } 

h2 { warna : putih ; background-color : hijau penting! ; }

Sejarah

Style sheet sudah ada dalam satu bentuk sejak awal dari SGML pada 1980-an. Cascading Style Sheets dikembangkan sebagai alat untuk menciptakan pendekatan yang konsisten untuk memberikan informasi gaya untuk dokumen web.

Sebagai HTML tumbuh, itu datang untuk mencakup lebih banyak jenis gaya kemampuan untuk memenuhi tuntutan pengembang web . Evolusi ini memberikan desainer lebih mengontrol tampilan situs, pada biaya dari HTML lebih kompleks. Variasi dalam browser web implementasi, seperti ViolaWWW dan WorldWideWeb , membuat penampilan situs konsisten sulit, dan pengguna memiliki kontrol yang kurang atas bagaimana konten web itu ditampilkan. Robert Cailliau ingin memisahkan struktur dari presentasi.Cara ideal akan memberikan pengguna pilihan yang berbeda dan mentransfer tiga macam style sheet:. satu untuk pencetakan, satu untuk presentasi di layar dan satu untuk fitur editor

Untuk meningkatkan kemampuan presentasi web, sembilan bahasa style sheet yang berbeda diusulkan ke World Wide Web Consortium daftar 's (W3C) www-gaya list. Dari sembilan proposal, dua dipilih sebagai dasar untuk apa yang menjadi CSS: Cascading Style Sheets HTML (CHSS) dan Stream berbasis Gaya Lembar Proposal (SSP). CHSS, sebuah bahasa yang memiliki beberapa kemiripan dengan hari ini CSS, diusulkan oleh Wium Lie Håkon pada Oktober 1994. Bert Bos sedang bekerja pada browser yang disebut Argo , yang menggunakan gaya sendiri bahasa lembar disebut SSP. Lie dan Yves Lafon bergabung Dave Raggett untuk memperluas Arena browser untuk mendukung CSS sebagai testbed aplikasi untuk W3C.Bos Lie dan bekerja sama untuk mengembangkan standar CSS (yang 'H' telah dihapus dari nama itu karena gaya ini lembaran juga dapat diterapkan pada bahasa markup lain selain HTML).

Tidak seperti bahasa style yang ada seperti DSSSL dan TTS , CSS memungkinkan gaya dokumen akan dipengaruhi oleh beberapa style sheet. Satu style sheet dapat mewarisi atau "cascade" dari yang lain, memungkinkan campuran gaya preferensi dikendalikan sama oleh perancang situs dan user.

Usulan Lie dipresentasikan pada " Mosaic dan Web "konferensi (kemudian disebut www2) di Chicago, Illinois pada tahun 1994, dan lagi dengan Bert Bos pada tahun 1995. Sekitar waktu ini W3C sudah sedang didirikan, dan mengambil minat dalam pengembangan CSS. Ini diselenggarakan lokakarya menuju akhir yang dipimpin oleh Steven Pemberton . Hal ini mengakibatkan W3C menambahkan bekerja pada CSS untuk kiriman dari redaksi Tinjauan HTML papan (ERB). Berbohong dan Bos adalah staf teknis utama pada aspek ini proyek, dengan anggota tambahan, termasuk Thomas Reardon dari Microsoft , berpartisipasi juga. Pada bulan Agustus 1996 Netscape Komunikasi Perusahaan disajikan lembar gaya bahasa alternatif yang disebut Style Sheets JavaScript (JSSS).spec tidak pernah selesai dan sudah ditinggalkan. Pada akhir 1996, CSS sudah siap untuk menjadi resmi, dan CSS tingkat 1 Rekomendasi diterbitkan pada bulan Desember.

Pengembangan dari HTML, CSS, dan DOM semua telah terjadi dalam satu kelompok, HTML Editorial Review Board (ERB). Pada awal 1997, Erb terpecah menjadi tiga kelompok kerja : Bekerja HTML kelompok, dipimpin oleh Dan Connolly dari W3C; DOM kelompok Kerja, dipimpin oleh Lauren Wood dari SoftQuad ; dan CSS kelompok Kerja, dipimpin oleh Chris Lilley dari W3C.

Kelompok Kerja CSS mulai menangani masalah yang belum ditangani dengan tingkat, CSS 1 sehingga penciptaan CSS tingkat 2 pada 4 November 1997. Buku ini diterbitkan sebagai Rekomendasi W3C pada tanggal 12 Mei 1998. CSS level 3, yang dimulai pada tahun 1998, masih dalam pengembangan sejak 2009.

Pada tahun 2005 Kerja CSS Grup memutuskan untuk menegakkan standar persyaratan lebih ketat. Ini berarti bahwa sudah diterbitkan standar seperti CSS 2.1, CSS 3 Selectors dan CSS 3 Teks ditarik kembali dari Calon Rekomendasi untuk tingkat Draft Bekerja.

Kesulitan dengan adopsi

CSS 1 spesifikasi selesai pada 1996. Microsoft Internet Explorer 3 dirilis pada tahun itu, yang menampilkan beberapa dukungan terbatas untuk CSS. Tapi itu lebih dari tiga tahun sebelum web browser mencapai hampir penuh pelaksanaan spesifikasi. Internet Explorer 5.0 untuk Macintosh , dikirim pada Maret 2000, adalah browser pertama yang memiliki penuh (lebih baik dari 99 persen) CSS 1 dukungan,melebihi Opera , yang telah pemimpin sejak diperkenalkan dukungan CSS 15 bulan sebelumnya. Browser lain diikuti segera setelah itu, dan bagian tambahan diimplementasikan banyak dari mereka dari CSS 2. Pada Agustus 2010 , tidak ada browser (jadi) telah sepenuhnya menerapkan CSS 2, dengan tingkat penerapan yang bervariasi (lihat Perbandingan mesin layout (CSS) ).

Meskipun browser awal seperti Internet Explorer 3 dan 4 , dan Netscape 4.x memiliki dukungan untuk CSS, itu biasanya tidak lengkap dan harus serius bug . Ini merupakan hambatan serius bagi penerapan CSS.

Ketika 'versi 5' kemudian browser mulai menawarkan implementasi yang cukup penuh CSS, mereka masih salah di daerah tertentu dan yang penuh dengan inkonsistensi, bug dan kebiasaan . Perkembangan seperti CSS terkait inkonsistensi dan bahkan variasi yang mendukung fitur telah membuatnya menjadi sulit bagi desainer untuk mencapai penampilan yang konsisten di browser dan platform . Beberapa penulis terpaksa workarounds seperti CSS hacks dan filter CSS .

Masalah dengan adopsi merata browser 'CSS, bersama dengan errata dalam spesifikasi asli, yang dipimpin W3C untuk merevisi CSS 2 standar ke dalam CSS 2.1, yang mendekat ke snapshot kerja dukungan CSS saat ini di browser HTML. Beberapa CSS 2 sifat yang tidak ada browser berhasil menerapkan dijatuhkan, dan dalam beberapa kasus, perilaku didefinisikan diubah untuk membawa standar sejalan dengan implementasi yang ada dominan. CSS 2.1 menjadi Rekomendasi Calon pada tanggal 25 Februari 2004, tetapi CSS 2.1 ditarik kembali ke Working Draft Status pada tanggal 13 Juni 2005, dan hanya kembali ke status Rekomendasi Calon pada tanggal 19 Juli 2007.

Di masa lalu, beberapa web server dikonfigurasi untuk melayani semua dokumen dengan ekstensi nama file . css sebagai mime type application / x-pointplus daripada text / css . Pada saat itu, perusahaan Bersih-Scene menjual pembuat PointPlus untuk mengkonversi PowerPoint file ke dalam file Slide Show Compact (menggunakan . css ekstensi).

Variasi

CSS memiliki berbagai tingkat dan profil. Setiap tingkat dibangun berdasarkan CSS, fitur terakhir baru biasanya menambahkan dan biasanya dinotasikan sebagai CSS1, CSS2 CSS3, dan CSS4. Profil biasanya subset dari satu atau lebih tingkat dari CSS dibangun untuk perangkat tertentu atau user interface. Saat ini ada profil untuk perangkat mobile, printer, dan televisi. Profil tidak boleh berbeda dengan berbagai jenis media, yang ditambahkan dalam CSS2.

CSS1

Spesifikasi CSS pertama yang menjadi rekomendasi W3C resmi CSS tingkat 1, diterbitkan pada bulan Desember 1996.Di antara kemampuan adalah dukungan untuk

Font properti seperti jenis huruf dan penekanan

Warna teks, latar belakang, dan elemen lainnya

Teks atribut seperti spasi antara kata, huruf, dan baris teks

Alignment teks, gambar, tabel dan elemen lainnya

Margin, border, padding, dan positioning untuk elemen yang paling

Unik identifikasi dan klasifikasi generik kelompok atribut

W3C tidak lagi mempertahankan Rekomendasi CSS1.

CSS2

CSS level 2 spesifikasi dikembangkan oleh W3C dan diterbitkan sebagai Rekomendasi pada Mei 1998. Sebuah superset dari CSS1, CSS2 mencakup sejumlah kemampuan baru seperti posisi absolut, relatif, dan tetap elemen dan z-index , konsep jenis media, dukungan untuk style sheet aural dan teks dua arah, dan properti font baru seperti bayangan.

W3C tidak lagi mempertahankan rekomendasi CSS2.

CSS 2.1

CSS level 2 revisi 1, sering disebut sebagai "CSS 2.1", perbaikan kesalahan dalam CSS2, menghilangkan fitur-kurang didukung atau tidak sepenuhnya interoperable dan menambahkan ekstensi browser yang sudah dilaksanakan untuk spesifikasi. Dalam rangka memenuhi Proses W3C untuk standarisasi spesifikasi teknis, CSS 2.1 bolak-balik antara status Draft Bekerja dan status Calon Rekomendasi untuk bertahun-tahun. CSS 2.1 pertama kali menjadi Rekomendasi Calon pada tanggal 25 Februari 2004, tapi itu kembali ke Draft Bekerja pada tanggal 13 Juni 2005 untuk diperiksa lebih lanjut. Ini kembali ke Rekomendasi Calon pada tanggal 19 Juli 2007 dan kemudian diperbarui dua kali pada tahun 2009. Namun, karena perubahan dan klarifikasi dibuat, lagi kembali ke Panggilan Terakhir Bekerja Draft pada tanggal 7 Desember 2010.

CSS 2.1 pergi ke Rekomendasi Diusulkan pada tanggal 12 April 2011.Setelah dikaji oleh Komite Penasehat W3C, akhirnya diterbitkan sebagai Rekomendasi W3C pada tanggal 7 Juni 2011.

CSS3

"CSS3" beralih ke halaman ini. Untuk kode bandara CSS3 , lihat Montréal / Les Cedres Bandara .

Tidak seperti CSS2, yang merupakan spesifikasi tunggal besar mendefinisikan berbagai fitur, CSS3 dibagi menjadi beberapa dokumen terpisah yang disebut "modul". Setiap modul menambahkan kemampuan baru atau memperluas fitur didefinisikan dalam CSS2, lebih menjaga kompatibilitas ke belakang. Bekerja pada CSS tingkat 3 mulai sekitar waktu penerbitan rekomendasi CSS2 asli. Para CSS3 awal draft diterbitkan pada bulan Juni 1999.

Karena modularisasi, modul yang berbeda memiliki stabilitas yang berbeda dan status.Pada November 2011, ada lebih dari lima puluh CSS modul diterbitkan dari Kelompok Kerja CSS. Tiga dari mereka-Selectors, Ruang nama dan Warna-menjadi Rekomendasi W3C pada tahun 2011.

Beberapa modul, seperti Backgrounds dan Warna, Queries Media, dan Multi-kolom Layout, memiliki status Rekomendasi Calon dan dianggap cukup stabil. Pada tahap ini, implementasi disarankan untuk menjatuhkan awalan vendor.

CSS4

W3C mulai menyusun CSS4 pada 29 September , 2009 .Namun, saat ini tidak didukung oleh web browser .

Salah satu hal yang baru adalah : pertandingan () . Untuk yang

: pertandingan ( div , p , nav ) p { 

font-size : 18px ; 

}

adalah sama dengan:

div div , p rentang , rentang nav { 

font-size : 18px ; 

}

Meskipun dalam Firefox dan WebKit sudah memiliki fungsi yang sama:

/*Firefox*/

-moz-any(div, p, nav) span{

font-size: 18px;

}

/*Webkit*/

-webkit-any(div, p, nav) span{

font-size: 18px;

}

Dukungan Browser

Karena tidak semua browser benar mengurai kode CSS, dikembangkan teknik pengkodean dikenal sebagai CSS hacks dapat menyaring browser tertentu atau menargetkan browser tertentu (umumnya keduanya dikenal sebagai filter CSS ). Yang pertama dapat didefinisikan sebagai CSS hacks penyaringan dan yang terakhir dapat didefinisikan sebagai CSS hacks penargetan. Keduanya dapat digunakan untuk menyembunyikan atau menampilkan bagian CSS untuk browser yang berbeda. Hal ini dicapai baik dengan memanfaatkan CSS- penanganan kebiasaan atau bug di browser, atau dengan mengambil keuntungan dari kurangnya dukungan untuk bagian dari spesifikasi CSS.Menggunakan filter CSS, beberapa desainer telah pergi sejauh memberikan CSS yang berbeda untuk tertentu browser untuk memastikan desain render seperti yang diharapkan. Karena browser web yang sangat awal adalah baik benar-benar tidak mampu menangani CSS, atau diberikan CSS sangat buruk, desainer hari ini sering secara rutin menggunakan filter CSS yang benar-benar mencegah browser ini dari mengakses salah satu CSS. Internet Explorer dukungan untuk CSS dimulai dengan IE 3.0 dan meningkat secara progresif dengan setiap versi. Pada tahun 2008, Beta pertama dari Internet Explorer 8 menawarkan dukungan untuk CSS 2.1 dalam modus terbaik web standar.

Contoh bug browser terkenal CSS adalah Internet Explorer model kotak bug , di mana lebar kotak diinterpretasikan secara tidak benar dalam beberapa versi browser, sehingga blok yang terlalu sempit bila dilihat di Internet Explorer, tetapi benar dalam standar-compliant browser. Bug dapat dihindari di Internet Explorer 6 dengan menggunakan benar DOCTYPE dalam (X) dokumen HTML. CSS hacks dan filter CSS digunakan untuk mengkompensasi bug seperti ini, hanya satu dari ratusan bug CSS yang telah didokumentasikan dalam berbagai versi Netscape , Mozilla Firefox , Opera , dan Internet Explorer (termasuk Internet Explorer 7 ).

Bahkan ketika ketersediaan CSS-mampu membuat browser CSS giat teknologi, penerapan CSS masih ditahan oleh 'perjuangan dengan browser' desainer pelaksanaan salah CSS dan merata dukungan CSS. Bahkan saat ini, masalah ini terus membuat bisnis desain CSS lebih kompleks dan mahal daripada ini dimaksudkan untuk menjadi, dan lintas-browser pengujian tetap suatu keharusan. Alasan lain untuk adopsi tidak melanjutkan dari CSS adalah: kompleksitas yang dirasakan, kurangnya penulis keakraban dengan sintaks CSS dan teknik yang diperlukan, dukungan miskin dari authoring tools, risiko yang ditimbulkan oleh inkonsistensi antara browser dan kenaikan biaya pengujian.

Saat ini ada persaingan kuat antara Mozilla 's Gecko layout engine yang digunakan dalam Firefox , yang WebKit tata letak mesin yang digunakan di Apple Safari dan Google Chrome , yang mirip KHTML mesin yang digunakan di KDE itu Konqueror browser, dan Opera Presto tata letak mesin -masing-masing adalah terkemuka di berbagai aspek CSS. [ klarifikasi diperlukan contoh akan berguna ] Pada Agustus 2009, Internet Explorer 8, Firefox 2 dan 3 memiliki tingkat yang cukup lengkap pelaksanaan CSS 2.1.

Keterbatasan

Beberapa keterbatasan dicatat dari kemampuan saat CSS meliputi:

Miskin kontrol untuk layout yang fleksibel 

Sedangkan tambahan baru untuk CSS 3 memberikan lebih kuat, lebih kuat fitur-set untuk layout, CSS masih di hati bahasa styling (untuk font, warna, perbatasan dan dekorasi lainnya), bukan bahasa tata letak (untuk blok dengan posisi, ukuran, margin, dan sebagainya). Keterbatasan ini berarti bahwa menciptakan layout cairan umumnya membutuhkan tangan-coding CSS, dan telah menahan pengembangan berbasis standar WYSIWYG editor.

Selectors tidak dapat naik

CSS tidak menawarkan cara untuk memilih orang tua atau nenek moyang unsur yang memenuhi kriteria tertentu. Sebuah skema pemilih lebih maju (seperti XPath ) akan memungkinkan style sheet yang lebih canggih. Namun, alasan utama Kelompok Kerja CSS menolak proposal untuk penyeleksi orang tua terkait dengan kinerja browser dan masalah render tambahan.

Vertikal kontrol keterbatasan 

Sementara penempatan horisontal unsur umumnya mudah untuk mengontrol, penempatan vertikal sering unintuitive, berbelit-belit, atau tidak mungkin. Kegiatan ringan seperti berpusat elemen vertikal atau mendapatkan footer yang akan ditempatkan tidak lebih tinggi dari bawah viewport, baik memerlukan aturan style rumit dan unintuitive, atau aturan sederhana namun banyak yang tidak didukung.

Tidak adanya ekspresi 

Saat ini tidak ada kemampuan untuk menentukan nilai properti sebagai ekspresi sederhana (seperti margin-left: 10% - 3em + 4px; ). Ini akan berguna dalam berbagai kasus, seperti menghitung ukuran kolom dikenakan kendala pada jumlah semua kolom. Namun, draft kerja dengan calc () nilai untuk mengatasi keterbatasan ini telah dipublikasikan oleh WG CSS.Internet Explorer versi 5 sampai 7 dukungan ekspresi berpemilik () pernyataan, dengan fungsi serupa. Pernyataan ekspresi () milik tidak lagi didukung dari Internet Explorer 8 dan seterusnya, kecuali dalam mode kompatibilitas. Keputusan ini diambil untuk "standar kepatuhan, kinerja browser, dan alasan keamanan".

Kurangnya deklarasi kolom 

Sementara saat ini mungkin dalam CSS 3 (menggunakan kolom-hitungan modul), layout dengan beberapa kolom dapat kompleks untuk melaksanakan dalam CSS 2.1. Dengan CSS 2.1, proses ini sering dilakukan dengan menggunakan elemen mengambang, yang sering diberikan berbeda oleh browser yang berbeda, bentuk layar komputer yang berbeda, dan rasio layar yang berbeda set pada monitor standar.

Tidak dapat secara eksplisit menyatakan lingkup baru secara independen dari posisi 

Peraturan Penjajakan untuk properti seperti z-index mencari elemen induk terdekat dengan posisi: absolut atau posisi: atribut relatif. Ini kopling aneh memiliki efek yang tidak diinginkan. Sebagai contoh, adalah mustahil untuk menghindari mendeklarasikan lingkup baru ketika seseorang dipaksa untuk menyesuaikan posisi suatu elemen, mencegah satu dari menggunakan ruang lingkup yang diinginkan dari elemen induk.

Pseudo-class perilaku dinamis tidak dapat dikontrol 

CSS menerapkan pseudo-kelas yang memungkinkan tingkat umpan balik pengguna dengan aplikasi bersyarat gaya alternatif. Satu CSS pseudo-kelas, ": hover", adalah dinamis (setara dengan javascript "onmouseover") dan memiliki potensi untuk penyalahgunaan (misalnya, menerapkan kursor-kedekatan popup),tetapi CSS tidak memiliki kemampuan untuk klien untuk menonaktifkannya (tidak ada "menonaktifkan"-seperti properti) atau membatasi dampaknya (tidak ada "nochange"-seperti nilai untuk masing-masing properti).

Keuntungan

Pemisahan konten dari presentasi

CSS memfasilitasi penerbitan konten dalam format presentasi beberapa berdasarkan parameter nominal. Nominal parameter termasuk preferensi pengguna eksplisit, web browser yang berbeda, jenis perangkat yang digunakan untuk melihat isi (komputer desktop atau perangkat mobile Internet), lokasi geografis dari pengguna dan variabel lainnya.

Situs-lebar konsistensi

Artikel utama: Pemisahan presentasi dan konten dan lembar Gaya (pengembangan web)

Bila CSS digunakan secara efektif, dalam hal warisan dan "Cascading," sebuah style sheet global dapat digunakan untuk mempengaruhi dan elemen gaya situs-lebar. Jika situasi muncul bahwa gaya dari elemen harus perlu diubah atau disesuaikan, perubahan ini dapat dibuat dengan mengedit aturan pada style sheet global. Sebelum CSS, semacam ini pemeliharaan lebih sulit, mahal dan memakan waktu.

Bandwidth

Sebuah stylesheet, internal atau eksternal, akan menentukan gaya sekali untuk berbagai elemen HTML yang dipilih oleh kelas , ketik atau hubungan dengan orang lain. Ini jauh lebih efisien daripada mengulangi informasi gaya inline untuk setiap kemunculan elemen. Sebuah stylesheet eksternal biasanya disimpan dalam cache browser , dan karena itu dapat digunakan pada beberapa halaman tanpa mengisi, lebih lanjut mengurangi transfer data melalui jaringan.

Halaman reformatting

Artikel utama: peningkatan Progresif

Dengan perubahan sederhana dari satu baris, sebuah style sheet yang berbeda dapat digunakan untuk halaman yang sama. Ini memiliki kelebihan untuk aksesibilitas, serta menyediakan kemampuan untuk menyesuaikan halaman atau situs untuk perangkat target yang berbeda. Selain itu, perangkat tidak dapat memahami styling masih menampilkan konten.

Aksesibilitas

Tanpa CSS, web designer biasanya harus lay out halaman mereka dengan teknik yang menghambat aksesibilitas bagi pengguna visi-gangguan, seperti tabel HTML (lihat desain web Tableless # Aksesibilitas ).

CSS kerangka

Kerangka CSS yang telah disiapkan perpustakaan yang dimaksudkan untuk memungkinkan lebih mudah, lebih sesuai standar styling dari halaman web menggunakan Cascading Style Sheets bahasa. Layout-grid-terkait CSS kerangka termasuk Blueprint , 960 kotak , dan CSS YUI grid . Seperti pemrograman dan scripting bahasa perpustakaan, kerangka CSS biasanya dimasukkan sebagai eksternal. Css lembar direferensikan dalam HTML . Mereka memberikan sejumlah yang sudah jadi pilihan untuk merancang dan meletakkan halaman web. Sementara banyak dari kerangka kerja ini telah dipublikasikan, beberapa penulis menggunakannya sebagian besar untuk prototyping cepat, atau untuk belajar dari, dan lebih memilih untuk 'kerajinan' CSS yang tepat untuk setiap situs diterbitkan tanpa pemeliharaan, desain dan download overhead memiliki fitur yang tidak digunakan styling di situs. 

Posisi

CSS 2.1 mendefinisikan tiga skema posisi:

Normal aliran

Inline item yang tercantum dalam cara yang sama seperti huruf dalam kata-kata dalam teks, satu demi satu di ruang yang tersedia sampai tidak ada lebih banyak ruang, maka memulai baris baru dibawah. Blok item menumpuk secara vertikal, seperti paragraf dan seperti item dalam daftar bullet. Aliran normal juga mencakup posisi relatif item blok atau inline, dan run-dalam kotak.

Mengapung

Item melayang diambil dari aliran normal dan bergeser ke kiri atau kanan sebagai sejauh mungkin di ruang yang tersedia. Konten lain kemudian mengalir bersama item melayang.

Absolute positioning

Item benar-benar diposisikan tidak memiliki tempat dalam, dan tidak berpengaruh pada, aliran normal item lainnya. Ini menempati posisinya ditugaskan di wadah terpisah dari item lainnya. 

Posisi: atas, bawah, kiri, dan kanan

Ada empat nilai yang mungkin dari posisi properti. Jika item diposisikan dalam cara apapun selain statis , maka sifat lebih lanjut atas , bawah , kiri , dan kanan digunakan untuk menentukan offset dan posisi.

Statis

Nilai default menempatkan item dalam aliran normal

Relatif

Item ini ditempatkan dalam aliran normal , dan kemudian bergeser atau offset dari posisi itu. Item aliran kemudian atas ditata jika item tersebut belum dipindahkan.

Mutlak

Menentukan posisi absolut

Tetap

Item ini benar-benar diposisikan dalam posisi tetap di layar bahkan sebagai sisa dokumen tersebut sama 

Float dan jelas

Para mengambang properti mungkin memiliki salah satu dari tiga nilai. Tentu diposisikan atau diperbaiki item tidak dapat melayang. Elemen lain yang biasanya mengalir di sekitar item melayang, kecuali mereka akan dicegah dari melakukannya oleh mereka yang jelas properti.

meninggalkan

Mengapung di sebelah kiri garis bahwa itu akan muncul di; item lain mungkin mengalir di sekitar sisi kanan

tepat

Mengapung di sebelah kanan garis bahwa itu akan muncul di; item lain mungkin mengalir di sekitar sisi kiri

jelas

Menghapus mengambang properti dari item. Hal ini dapat jelas: kiri ;, jelas: benar; atau clear: both;