Kongsi beberapa contoh hebat tentang perkara yang CSS boleh lakukan_Pertukaran pengalaman

Apabila saya menulis artikel "5 Cara JavaScript dan CSS Berinteraksi Yang Mungkin Anda Tidak Tahu", orang ramai terkejut melihat bagaimana JavaScript dan CSS bertindih. Hari ini, saya akan menyerlahkan 7 perkara yang boleh anda lakukan dengan CSS—tanpa JavaScript atau imej.

CSS@sokongan

Setiap pembangun bahagian hadapan yang baik perlu menjalankan ujian ciri apabila menggunakan ciri yang mungkin tidak tersedia dalam sesetengah penyemak imbas. Ujian ciri sentiasa dilakukan dalam JavaScript, dan ramai orang menggunakan Modernizr, utiliti yang sangat baik yang diperbuat daripada banyak kes yang diuji dengan baik, untuk melakukan ujian ciri. API baharu: @supports, bagaimanapun, telah muncul untuk pembangun, yang membolehkan anda melakukan ujian ciri dengan CSS. Berikut ialah beberapa contoh mudah tentang cara @supports berfungsi:

Salin kod Kod adalah seperti berikut:

/* penggunaan asas */
@supports( prop:value) {
/* lagi gaya */
}

/* penggunaan sebenar */
@supports (paparan: flex) {
div { paparan: flex }
}

;

/* menguji awalan juga */
@supports (paparan: -webkit-flex) atau
(paparan: -moz-flex) atau
(paparan: flex) {

bahagian {
paparan: -webkit-flex;
paparan: -moz-flex;
paparan: flex;
apungan: tiada;
}
}

Ciri @supports baharu ini juga mempunyai versi JavaScript yang sepadan, tetapi ia telah tamat tempoh.

Penapis CSS

Tulis perkhidmatan untuk menukar ton warna imej, dan kemudian anda boleh menjualnya kepada Facebook untuk berbilion dolar. Sudah tentu, itu tidak perlu dipikirkan, tetapi menulis penapis imej bukanlah satu sains. Satu program kecil yang saya tulis pada minggu pertama saya di Mozilla (memenangi anugerah, eh, saya hanya mengatakannya) menggunakan beberapa matematik berasaskan JS untuk mencipta penapis imej menggunakan kanvas, tetapi kini kita boleh mencipta imej menggunakan CSS Disaring.

Salin kod Kod adalah seperti berikut:

/* penapis mudah */
.myElement {
-webkit-filter: blur(2px);
}

/* penapis lanjutan */
.myElement {
-webkit-filter: blur(2px) grayscale (.5) opacity(0.8) hue-rotate(120deg);
}

Penapis jenis ini hanya mengubah rupa asal imej Penapis tersebut tidak digunakan semasa menyimpan atau mengeksport imej, tetapi ia sangat berguna apabila anda perlu mencantikkan foto atau memproses poster.

　Peristiwa Penunjuk dan Klik Bricking

Sifat CSS Pointer Events menyediakan cara untuk melumpuhkan elemen dengan berkesan Oleh itu, melalui JavaScript, mengklik pautan tidak akan mencetuskan acara klik:

Salin kod Kod adalah seperti berikut:

/* tidak melakukan apa-apa apabila diklik atau diaktifkan * /
.dilumpuhkan { pointer-events: none; }/* ini akan _not_ fire because of the pointer-events: none application */

document.getElementById("disabled-element").addEventListener("click", function(e) {
alert("Clicked!");
});

Dalam contoh di atas, acara klik tidak akan dicetuskan kerana nilai peristiwa penuding CSS. Saya dapati ini sangat membantu, anda tidak perlu menyemak className atau sifat di mana-mana untuk memastikan beberapa elemen dilumpuhkan.
　
　Turunkan dan kembangkan menu

CSS membolehkan kami mencipta kesan peralihan dan animasi, tetapi sering kali kami memerlukan perpustakaan JavaScript untuk membantu kami mengubah suai beberapa perkara dan mengawal animasi. Animasi yang sangat popular ialah kesan menu lipat dan berkembang Ramai orang tidak tahu bahawa ia boleh dicapai hanya menggunakan CSS!

Salin kod Kod adalah seperti berikut:

/* peluncur dalam keadaan terbuka */
. peluncur {
limpahan-y: tersembunyi;
ketinggian maksimum: 500px; /* anggaran ketinggian maksimum */

sifat peralihan: semua;
tempoh peralihan: .5s;
fungsi pemasaan peralihan: kubik-bezier(0, 1, 0.5, 1);
}

/* tutup dengan kelas "tertutup" */
.gelangsar.tutup {
ketinggian maks: 0;
}

Penggunaan bijak Max-height boleh membenarkan elemen runtuh dan mengembang mengikut kesan yang diingini.

　Kaunter CSS

Istilah "kaunter" sering membuat kita ketawa melihat maksudnya di web, tetapi kaunter CSS ialah perkara lain yang membuatkan kita lebih ketawa. Pembilang CSS membenarkan pembangun menambah pembilang pada elemen tertentu menggunakan :before dan :after:

Salin kod Kod adalah seperti berikut:

/* mulakan kaunter */
ol. slaid {
set semula balas: slideNum;
}

/* naikkan pembilang */
ol.slides > li {
counter-increment: slideNum;
}

/* paparkan nilai pembilang */
ol.slides li:selepas {
kandungan: "[" counter(slideNum) "]";
}

Anda sering melihat pembilang CSS digunakan dalam kesan tayangan slaid dan senarai seperti kandungan borang.

　Nama gaya CSS Unikod

Terdapat banyak dokumen amalan terbaik CSS, dan semuanya bermula dengan cara menamakan gaya CSS. Anda tidak akan pernah melihat dokumen yang mengatakan untuk menamakan gaya anda dengan simbol unikod:

Salin kod Kod adalah seperti berikut:

.ಠ_ಠ {
sempadan: 1px pepejal #f00 ;
latar belakang: merah jambu;
}

.❤ {
latar belakang: hijau muda;
sempadan: 1px hijau pepejal;
}

Sila jangan gunakan simbol ini. Kecuali anda boleh!

　Kalangan CSS

Segitiga CSS ialah kerja teknikal dan perkara yang sama berlaku untuk kalangan CSS. Dengan menyalahgunakan jejari sempadan CSS, anda boleh mencipta kalangan yang sempurna!

Salin kod Kod adalah seperti berikut:

bulatan {
jejari sempadan: 50%;
lebar: 200px;
tinggi: 200px;
/* lebar dan tinggi boleh jadi apa sahaja, asalkan sama */
}

Anda boleh menambah kecerunan pada kalangan anda dan anda juga boleh menggunakan animasi CSS untuk menggerakkan kalangan anda! CSS akan mempunyai lebih banyak API bersatu untuk bentuk ini, tetapi buat masa ini anda boleh membuat kalangan dengan cara ini.

Itulah, 7 perkara yang boleh anda lakukan dengan CSS yang akan mengejutkan anda, sebahagian daripadanya sangat berguna dan sebahagian daripadanya tidak anda perlukan di tempat kerja. Sila beritahu saya jika saya kehilangan beberapa kaedah CSS hebat di tempat kerja yang anda kerap gunakan.