Cascading Style Sheets: Perbedaan antara revisi
Konten dihapus Konten ditambahkan
k clean up |
|||
Baris 34:
Bagian pertama sebelum tanda '{}' dinamakan ''selector'', sedangkan yang diapit oleh '{}' disebut ''declaration'' yang terdiri dari ''dua'' unsur, yaitu ''property'' dan ''value''. ''Selector'' dalam pernyataan di atas adalah h1, sedangkan ''color'' adalah ''property'', dan #0789de adalah ''value.''<ref>Untung Julianto, ''Modifikator Blogger + CD'', halaman 22. Elex Media Komputindo.</ref>
''Selain itu ada tiga metode penulisan CSS atribut, yaitu:''<ref
=== Inline Style Sheet ===
Baris 288:
== Dukungan dari peramban web ==
Masing-masing peramban web menggunakan [[mesin tata letak]] yang berbeda. Contohnya Firefox menggunakan [[Gecko]] sebagai mesin tata letaknya dan Chromium menggunakan [[Blink (mesin browser)|Blink]] sebagai mesin tata letaknya. Dukungan untuk fitur CSS dari setiap mesin tata letak terkadang sering tidak konsisten. Beberapa teknik pun bermunculan untuk menggunakan suatu fitur CSS ke peramban web yang tidak mendukung fitur tersebut (biasa disebut ''CSS hack''). Adopsi fitur CSS baru dapat terhambat oleh kurangnya dukungan dari peramban-peramban web besar. Contohnya fitur <code>cross-fade()</code> telah didukung oleh Chrome dan Safari namun sampai tahun 2021 masih belum didukung oleh Firefox.<ref>{{Cite web|title=Can I use... Support tables for HTML5, CSS3, etc|url=https://caniuse.com/?search=cross%20fade|website=caniuse.com|access-date=2021-02-24}}</ref>
Beberapa pengembang web biasanya memeriksa terlebih dahulu dukungan untuk suatu fitur CSS, terutama untuk fitur CSS baru. Beberapa situs web berikut dapat membantu seperti [https://caniuse.com CanIUse] dan [https://developer.mozilla.org Mozilla Developer Network]. CSS 3 memiliki fitur kueri, yang memberikan arahan <code>@supports</code> yang akan memungkinkan pengembang menargetkan peramban web dengan dukungan untuk fungsionalitas tertentu langsung di dalam CSS mereka.<ref>{{Cite web|title=Using Feature Queries in CSS – Mozilla Hacks - the Web developer blog|url=https://hacks.mozilla.org/2016/08/using-feature-queries-in-css|website=Mozilla Hacks – the Web developer blog|language=en-US|access-date=2021-02-24}}</ref> CSS yang tidak didukung oleh suatu peramban web kadang-kadang bisa ditambal menggunakan [[polyfill]], yang merupakan potongan kode JavaScript yang dirancang untuk memberikan dukungan untuk peramban web terhadap suatu fitur yang sebelumnya tidak didukung. Solusi ini dapat menambah kerumitan pada proyek pengembangan, dan akibatnya, perusahaan sering kali menentukan daftar versi peramban web yang akan dan tidak akan mereka dukung.
Baris 323:
{{Main|CSS Preprocessor}}''CSS preprocessor'' (pra pengolahan) adalah bahasa script atau program yang memungkinkan pengguna menulis kode CSS sesuai dengan [[sintaksis]] (''syntax) prepocessor'' itu sendiri.<ref name=":0">{{Cite web|title=CSS preprocessor - MDN Web Docs Glossary: Definitions of Web-related terms {{!}} MDN|url=https://developer.mozilla.org/en-US/docs/Glossary/CSS_preprocessor|website=developer.mozilla.org|language=en-US|access-date=2022-09-28}}</ref>
Ada banyak jenis CSS ''prepocessor'' yang dapat digunakan, namun sebagain besar CSS ''prepocessor'' memiliki beberapa fitur yangt tidak ada di ''vanilla'' CSS (CSS polos atau murni). Beberapa fitur tersebut di antaranya yaitu penulisan variabel, ''nesting'', ''mixins'', ''extends'', ''color operations'', ''if/else statement'', ''loops'', dan lain sebagainya. Fitur-fitur tersebut membuat penulisan kode CSS menjadi lebih mudah dibaca dan lebih mudah dirawat,
Berikut adalah beberapa CSS ''preprocessor'' [[popular]] dan sering digunakan, di antaranya yaitu :<ref name=":0" />
| |||