Dari penulis: CSS dapat melakukan lebih dari yang disadari oleh banyak pengembang web. Setiap tahun, bahasa markup gaya menjadi semakin kuat, menciptakan fungsionalitas baru di browser yang sebelumnya hanya dapat diimplementasikan melalui JS. Pada artikel ini, kita akan melihat 8 trik fungsi CSS yang tidak memerlukan JS apa pun.

Tooltip menggunakan CSS murni

Banyak situs web yang masih menggunakan JS untuk membuat tooltip, tetapi saat ini lebih mudah melakukannya dengan CSS. Cara termudah adalah dengan menambahkan teks tooltip ke atribut data dalam kode HTML. Misalnya, data-tooltip="...". Untuk menampilkan teks tooltip di dalam fungsi attr() yang perlu Anda tambahkan kode berikut CSS ke markup yang ada:

Keterangan alat::setelah ( konten: attr(data-tooltip); )

Tidak perlu penjelasan, kan? Tentu saja, Anda perlu menambahkan beberapa kode dan menata tooltip dengan benar, tapi jangan khawatir. Murni untuk keperluan ini ada perpustakaan khusus yang ditulis dalam CSS, Hint.css.

Menggunakan atribut data khusus dan fungsi attr()

Kita telah menggunakan fungsi attr() untuk membuat tooltips, namun fungsi ini memiliki kegunaan lain. Dengan menggunakan fungsi ini, bersama dengan atribut data, Anda dapat membuat pratinjau gambar dengan judul dan deskripsi. Dan semua ini dilakukan sendirian rangkaian HTML kode:

Fungsi attr() sekarang dapat digunakan untuk menampilkan judul dan deskripsi:

Keterangan::setelah ( konten: attr(judul data); ... )

Di bawah ini contoh gambar preview dengan judul pop-up pada event hover:

Penghitung CSS

Apa yang bisa kita lakukan dengan penghitung CSS itu seperti sulap. Fitur ini bukan yang paling terkenal dan kebanyakan orang akan berpikir bahwa fitur ini kurang didukung. Namun, semua browser mendukung penghitung CSS:

Anda tidak boleh menggunakan penghitung CSS pada daftar bernomor (ol). Namun, mereka bagus untuk navigasi halaman atau untuk menampilkan nomor di bawah item galeri. Anda bahkan dapat menghitung jumlah elemen yang dipilih, yang sangat mengesankan mengingat kode kecil di belakangnya (dan tidak ada JS sama sekali).

Penghitung CSS juga bagus untuk mengubah angka secara dinamis dalam daftar elemen yang dapat diacak dengan mouse:

Seperti contoh sebelumnya, ketahuilah bahwa ada masalah aksesibilitas dengan konten yang dihasilkan.

Efek kaca buram bantuan CSS filter

Dengan dirilisnya iOS 7, Apple memberi kami efek kaca buram - elemen buram dan tembus pandang yang terlihat seperti kaca buram. Berkat Apple, efek ini mulai terlihat di banyak tempat. Cukup sulit untuk menciptakan kembali efeknya. Sebelum munculnya filter CSS, efek kaca buram harus disimulasikan gambar buram. Pada saat ini Filter CSS didukung penuh di hampir semua browser, membuat ulang efek ini jauh lebih mudah.

Nantinya, kami akan dapat membuat efek serupa menggunakan filter latar belakang dan fungsi filter(), yang saat ini hanya didukung di Safari.

Menggunakan tag HTML sebagai gambar latar belakang

Biasanya sebagai gambar latar belakang atau gradien yang Anda tentukan file JPEG atau PNG. Tahukah Anda bahwa Anda dapat menggunakan fungsi element() untuk menyetel tag div sebagai gambar latar belakang? Saat ini fungsi element() hanya didukung di Firefox:

Kemungkinan fungsinya hampir tidak terbatas, berikut adalah contoh dari MDN.

Jaringan pintar menggunakan calc()

Jaring cair adalah alat yang hebat, tetapi ada beberapa masalah serius. Misalnya, Anda tidak bisa membuat pembatas di bagian atas dan bawah sama besarnya dengan pembatas di kiri dan kanan. Selain itu, tergantung pada sistem grid yang digunakan, penandaannya akan berantakan. Anda bahkan tidak bisa menyebutnya flexbox solusi terbaik, namun, dengan fungsi calc(), yang dapat digunakan sebagai nilai dalam CSS, grid bisa menjadi jauh lebih baik. Dalam tutorial SitePoint ini, George Martzoukos menunjukkan beberapa contoh praktis, termasuk kisi galeri dengan jarak sempurna. DENGAN Praprosesor CSS menciptakan sistem grid bisa menjadi luar biasa tugas sederhana, dan jaringannya sendiri akan sangat mudah dirawat. Dukungan fungsinya sangat baik, pastikan untuk menggunakan fungsi calc().

Menyelaraskan elemen dengan posisi: diperbaiki menggunakan fungsi CSS calc()

Contoh lain penggunaan fungsi calc() adalah menyelaraskan elemen dengan posisi tetap. Misalnya, Anda memiliki pembungkus blok untuk konten dengan bantalan kiri dan kanan yang dapat disesuaikan, dan Anda ingin menyelaraskan elemen tetap di dalam wadah dengan tepat. Anda perlu menghabiskan banyak waktu menghitung nilai pasti untuk properti kanan atau kiri. Namun, dengan calc() Anda dapat menggabungkan nilai relatif dan absolut untuk penyelarasan sempurna.

Selamat tinggal. Saya ingin memberi tahu Anda tentang tren fungsi di CSS 3 dan bagaimana fungsi tersebut dapat dan bahkan terkadang harus digunakan dalam proyek.

Agar tidak membuang waktu Anda, saya akan menjelaskan properti yang ingin saya ceritakan kepada Anda:

• fungsi penghitung
• fungsi perhitungan
• fungsi attr
• fungsi beralih
• satuan pengukuran - rem
• satuan ukuran - vw
• satuan pengukuran - vh

Fungsi di css 3

Kegembiraan yang luar biasa terdengar di antara banyak pengembang ketika kami menerima salah satu fungsi pertama - kueri media, yang memungkinkan kami menerima gaya tertentu tergantung pada semua jenis faktor eksternal. Faktanya, itu hanyalah tambahan besar pada fungsionalitas yang distandarisasi dalam versi CSS 2.1.

Berkat munculnya peluang seperti itu, dunia menjadi lebih cerah, situs menjadi lebih nyaman jika dilihat dari semua jenis gadget, dan lahirlah konsep seperti Desain Web Responsif dan Desain Web Adaptif (sebenarnya, yang kedua adalah subset dari yang pertama).

w3c tidak berhenti di situ, dan baru-baru ini kami mendengar tentang fungsi seperti dukungan atau Kueri Fitur CSS, yang hanya didukung di firefox mulai dari versi 21, chrome mulai dari versi 28 dan di opera terbaru (12.1).

Inilah bintang-bintang kita, mereka menjadi pusat perhatian dan semua orang menyukainya. Dengan mereka semuanya cukup jelas dan nyata. Sekarang mari kita lihat fungsi yang kurang penting.

Menangkal

Ini adalah fungsi kenaikan di css, yang telah ada sejak versi 2.1. Apa yang dia lakukan, kamu bertanya?! Dan dia melakukan hal berikut:
Fungsi penghitung memungkinkan Anda memulai penghitung dengan nama, menaikkannya, dan menyetel ulang ke nol. Konten penghitung dapat ditampilkan melalui elemen semu setelah dan sebelum. Secara umum, tiru daftar Anda, meskipun saya sendiri tidak menemukan manfaat apa pun dari fungsi ini.

Kalkulasi

Mengenai dukungan:

• Penjelajah internet 9+
• Mozilla Firefox 19+
• Chrome 24+
• Safari 6+
• Opera tidak mendukung

Bagi saya pribadi fungsi ini Saya sangat menyukainya, karena ini memungkinkan saya mempersingkat kode sedikit ketika, misalnya, saya perlu memusatkan sebuah elemen:

Kotak ( posisi: absolut; lebar: 400px; kiri: calc(50% - 200px); )

Beralih

Fungsi sakelar memungkinkan Anda menerima gaya tertentu bergantung pada gaya elemen induk.

Induk ( gaya font: miring; ) .anak ( gaya font: beralih(miring, normal); )

Hasilnya, kita memiliki logika berikut: Jika properti font-style induk memiliki nilai miring, maka terapkan normal pada elemen turunan, tetapi jika induk memiliki nilai selain miring, maka elemen turunan akan miring.

Informasi dukungan metode ini Saya tidak menemukannya, tetapi hasil tes membuat saya percaya bahwa belum ada yang mendukungnya. Yah, saya tidak kesal, saya tidak menggunakan kaskade sama sekali, jadi saya tidak memerlukan kemampuan seperti itu, dan secara umum profilnya sempit.

attr

Saya rasa banyak orang juga yang familiar dengan fungsi attr.

Fungsi ini memungkinkan Anda menampilkan nilai atribut apa pun melalui elemen semu setelah dan sebelum. Omong-omong, fungsinya juga ada sejak versi css 2.1, tetapi menerima pembaruan di versi 3. Atribut ini akan memungkinkan Anda untuk menulis hal-hal seperti:

stok > * ( tampilan: blok; lebar: attr(panjang em); /* default 0 */ tinggi: 1em; batas: padat tipis; margin: 0,5em; )

Saat ini tidak ada dukungan untuk perbaikan ini di mana pun.

Sayangnya bahan ini berada dalam status Rekomendasi Kandidat dan belum diketahui apakah manfaat di atas akan berfungsi dalam waktu dekat. Dokumen tersebut juga berisi baris berikut:

Fitur berikut ini berisiko dan mungkin hilang selama periode CR: ‘calc()’, ‘toggle()’, ‘attr()’.

Jadi kita mungkin tidak melihat semua kesenangan ini.

Intinya

Secara pribadi, saya suka bahwa css memperkenalkan fungsi dan memungkinkan Anda melakukan hal-hal yang sebelumnya dilakukan, dan menurut saya itu bagus. Di situlah saya selesai berbicara tentang fungsi.

Rem, vw dan vh

Nilai rem dianalogikan dengan em, dengan satu-satunya perbedaan yang selalu diperhatikan nilai html, dan bukan induknya seperti em biasa. Oleh karena itu namanya root em => rem.

rem didukung oleh semua orang browser modern, termasuk 9 dan 10 penjelajah Internet. Jika Anda mendukung versi 8, sayangnya Anda tidak akan dapat menggunakan rem.

vw dan vh

Di balik singkatan-singkatan ini, yang sekilas tidak dapat dipahami, terdapat satuan pengukuran yang sangat jelas dan berguna.

1 unit vh atau vw sama dengan 1% lebar atau tinggi area pandang pengguna. Oleh karena itu, 100wh akan sama dengan 100% lebar jendela browser, yang dalam beberapa kasus dapat berguna, karena ketika menetapkan nilai misalnya lebar, Anda tidak memulai dari lebar induk, tetapi dari viewport, yang mana Anda tidak akan bisa melakukannya dengan%.

Mendukung:

• Penjelajah internet 9+
• Mozilla Firefox 19+
• Chrome 24+
• Safari 6+
• Opera tidak mendukung

Terima kasih atas perhatiannya, semoga bermanfaat bagi anda dalam tugas kami yang terkadang sulit.

CSS dapat melakukan lebih dari yang Anda harapkan. Setiap tahun bahasa ini menjadi lebih canggih, memperoleh fungsionalitas yang sebelumnya hanya tersedia dalam JavaScript. Pada artikel ini, kita akan melihat 8 trik cerdas dengan fungsi CSS yang tidak memerlukan JS.

1. Keterangan alat

Banyak situs yang masih menggunakan JavaScript untuk membuat tooltips, namun sebenarnya lebih mudah melakukannya dengan CSS. Solusi termudah adalah dengan menulis teks tooltip di atribut data kode HTML, misalnya data-tooltip="..." . Anda sekarang dapat menggunakan CSS untuk menampilkan teks tooltip di fungsi attr():

Keterangan alat::setelah ( konten: attr(data-tooltip); )

Semuanya sangat sederhana. Tentu saja, penataan gaya memerlukan lebih banyak kode, tetapi untungnya ada perpustakaan bagus untuk ini yang disebut Hint.css.

2. Menggunakan atribut data dan fungsi attr()

Kita sudah menggunakan attr() untuk tooltips, tapi ini tidak satu-satunya cara penerapannya. Dikombinasikan dengan atribut data, Anda dapat membuat gambar tag dengan judul dan deskripsi hanya menggunakan satu baris HTML:

Sekarang Anda dapat menggunakan fungsi attr() untuk menampilkan judul dan deskripsi:

Keterangan::setelah ( konten: attr(judul data); ... )

Berikut ini contoh kerja dengan animasi hover:

3. Penghitung CSS

Apa yang dapat Anda lakukan dengan penghitung CSS sungguh ajaib. Ini bukanlah fitur bahasa yang paling terkenal, dan banyak orang percaya bahwa fitur ini hanya memiliki sedikit dukungan, namun ini tidak benar:

Penghitung CSS juga bagus untuk menampilkan angka-angka yang berubah secara dinamis dalam daftar yang dapat diurutkan ulang dengan menyeret dan melepaskan:

4. Efek kaca beku menggunakan filter CSS

Kembali ke iOS 7, Apple menambahkan efek "kaca beku" - elemen tembus pandang dan buram. Efek ini menjadi sangat populer. Menerapkannya sebelumnya tidak mudah - sebelum filter CSS muncul, gambar harus terdistorsi. Sekarang semuanya menjadi lebih mudah.

6. Peningkatan grid menggunakan calc()

Jaring fleksibel adalah hal yang sangat berguna, tetapi ketika bekerja dengannya, masalah muncul. berbagai masalah, terutama terkait dengan tata letak dan ukuran balok. Bahkan flexbox tidak dapat melakukan pekerjaannya sendirian. Tapi fungsi calc(), yang bisa digunakan sebagai nilai, bisa sangat berguna. Panduan ini memberikan contoh cara menggunakan fitur ini. Menggunakan praprosesor seperti Sass dan fungsi calc(), membuat grid yang berguna sangatlah mudah. Apalagi fitur ini didukung oleh hampir semua browser.

Lihat Bisakah Saya Menggunakan Kalsium? Data aktif dukungan untuk fitur calc di browser utama dari caniuse.com.

7. Penyelarasan elemen tetap

Fungsi calc() juga dapat digunakan untuk menyelaraskan elemen dengan posisi tetap. Misalnya, jika Anda memiliki pembungkus dengan margin berukuran variabel di kiri dan kanan, dan Anda perlu menyelaraskan elemen di dalam pembungkus dengan tepat, Anda harus memutar otak untuk memilih ukuran yang benar lekukan. Dengan calc() Anda dapat menggabungkan nilai absolut dan relatif untuk penyelarasan sempurna:

Pembungkus ( max-width: 1060px; margin: 0 auto; ) .floating-bubble ( posisi: tetap; kanan: calc(50% - 530px); /* 50% - setengah lebar pembungkus Anda */ )

Fungsi attr() digunakan untuk menambahkan nilai atribut elemen HTML ke properti style. Misalnya, Anda bisa mendapatkan nilainya atribut kelas dan kemudian menggunakannya sebagai nilai properti latar belakang untuk mengubah warna.

Sebutan

Nilai-nilai

<атрибут>Nama atribut elemen diteruskan ke CSS.<тип>Tipe nilai Properti CSS. Berikut ini dapat diterima kata kunci: string (string), warna (warna), url (alamat web), bilangan bulat (integer), angka ( bilangan real), sudut (angle), waktu (time), deg (derajat), dan Unit CSS seperti em, px, dll.<значение>Nilai yang akan digunakan jika atribut tidak ada atau browser tidak dapat memperolehnya.

Di antara versi CSS ada sedikit perbedaan dalam membaca beberapa fitur attr() . Di CSS2.1, fungsi attr() hanya dapat digunakan bersama dengan properti konten dan selalu mengembalikan string sebagai nilainya. Di CSS3, attr() dapat digunakan dengan properti apa pun dan nilai yang dikembalikan dapat dalam format apa pun yang valid CSS3.

Contoh

Situs yang berguna

DI DALAM dalam contoh ini Setelah tautan dengan kelas situs, nilai atribut href yang gayanya diterapkan ditampilkan dalam tanda kurung.

Spesifikasi

Setiap spesifikasi melewati beberapa tahap persetujuan.

• Rekomendasi - Spesifikasi telah disetujui oleh W3C dan direkomendasikan sebagai standar.
• Rekomendasi Kandidat ( Rekomendasi yang mungkin ) - kelompok yang bertanggung jawab atas standar tersebut merasa yakin bahwa standar tersebut telah mencapai tujuannya, namun memerlukan bantuan dari komunitas pengembang untuk menerapkan standar tersebut.
• Usulan Rekomendasi Rekomendasi yang Disarankan) - pada tahap ini dokumen diserahkan ke Dewan Penasihat W3C untuk persetujuan akhir.
• Draf Kerja - Versi draf yang lebih matang yang telah dibahas dan diubah untuk ditinjau oleh komunitas.
• Draf redaksi ( Draf redaksi) - versi draf standar setelah perubahan dilakukan oleh editor proyek.
• Draf ( Spesifikasi rancangan) - versi draf pertama dari standar.