Membina penukar gaya dengan CSS tulen menggunakan: diperiksa

3

Beberapa tahun yang lalu, pemaju web tidak dapat melaksanakan dan membina begitu banyak perkara menggunakan CSS sahaja dan tanpa bergantung pada JavaScript. Tetapi hari ini CSS cukup matang sehingga ia mampu melakukan perkara yang kuat tanpa menulis satu baris JavaScript. Anda mungkin juga membaca beberapa artikel mengenai "pendekatan CSS sahaja" yang menunjukkan kuasa CSS.

Ketika datang ke pendekatan CSS sahaja, kita tidak boleh mengabaikan: pemilih kelas pseudo yang diperiksa, yang akan saya gunakan dalam siaran ini. Sudah tentu, saya bukan orang pertama yang menulis tentang teknik ini, dan terdapat perbincangan lain yang lebih luas mengenai penggunaan elemen bentuk sebagai pengganti JavaScript. Contohnya artikel Adobe ini oleh Louis Lazaris dan tayangan slaid hebat ini oleh Ryan Seddon.

Takeaways Key

The: Pemilih kelas pseudo yang diperiksa dalam CSS boleh digunakan untuk membina penukar gaya tanpa perlu menulis garis JavaScript. Ia memilih mana -mana elemen radio atau kotak semak yang diperiksa atau dipilih.

The: Pemilih kelas pseudo yang diperiksa berfungsi bersempena dengan elemen input dan label. Atribut 'untuk' dalam elemen label, apabila diklik, memilih atau memeriksa elemen input yang berkaitan, dengan itu membolehkan penggunaan pemilih yang diperiksa.

Kedudukan CSS: Tetap 'tetap, bersama -sama dengan sifat' atas 'dan' kanan ', boleh digunakan untuk meletakkan unsur -unsur pada halaman. Hartanah 'Z-index' memastikan bahawa label tetap berada di atas mana-mana elemen lain di halaman.

• The: Pemilih kelas pseudo yang diperiksa boleh digunakan untuk menukar latar belakang elemen, menyembunyikan atau menunjukkan kandungan, atau memohon gaya lain, berdasarkan interaksi pengguna dengan elemen label yang berkaitan.
• The: Pemilih kelas pseudo yang diperiksa berfungsi dengan pemilih saudara bersebelahan () dan pemilih saudara umum (~), yang membolehkan interaksi antara unsur-unsur yang berbeza pada halaman. Teknik ini boleh digunakan untuk membuat pelbagai ciri interaktif pada laman web.
menggunakan: diperiksa
• Singkatnya, pemilih kelas pseudo yang diperiksa (memilih) mana-mana elemen radio atau kotak semak yang diperiksa atau dipilih. Pengguna boleh mengubah keadaan unsur -unsur ini dengan memeriksa kotak semak atau memilih nilai yang berbeza dalam satu set butang radio.
• Sebelum kita menyelam lebih mendalam, lihat demo akhir untuk mendapatkan rasa apa yang akan kita bina sepanjang tutorial ini:

Lihat pena gaya pena dengan CSS tulen menggunakan: diperiksa oleh SitePoint (@SitePoint) pada codepen.

Sekarang mari kita mulakan.

Membina kotak tetapan

Dalam demo, anda sepatutnya melihat ikon gear dan bagaimana, apabila diklik, kotak dengan beberapa pilihan muncul. Sebelum kita menerangkan HTML dan CSS yang membentuk kotak itu, lihat kod berikut:

<span>/* we don't want the input fields to appear, all we need is the labels */
</span><span>input<span><span>[type="checkbox"]</span>, input<span>[type="radio"]</span></span> {
</span>  <span>position: absolute;
</span>  <span>visibility: hidden;
</span><span>}
</span>
<span><span>.settings-box-element</span> {
</span>  <span>z-index: 10;
</span><span>}</span>

Oleh kerana kami hanya berminat untuk menunjukkan label, kod di atas digunakan untuk menyembunyikan kotak semak dan butang radio. Selain itu, semua label mempunyai kelas-elemen kotak-kotak dengan harta Z-indeks hanya untuk memastikan label akan kekal di atas mana-mana elemen lain di halaman.

Sekarang kita boleh memecahkan kod yang membentuk kotak tetapan. Mari kita mulakan dengan butang gear. Inilah HTML:

<span><!-- the gear icon that opens the box when you click on it -->
</span><span><span><span><input</span> id<span>="settings-btn"</span> class<span>="settings-btn"</span> type<span>="checkbox"</span>></span>
</span><span><span><span><label</span> for<span>="settings-btn"</span> class<span>="settings-box-element"</span>></span><span><span></label</span>></span></span>

dan CSS:

<span><span>.settings-btn + label</span> {
</span>  <span>position: fixed;
</span>  <span>top: 130px;
</span>  <span>right: 0;
</span>  <span>display: block;
</span>  <span>width: 35px;
</span>  <span>color: #e83737;    
</span>  <span>text-align: center;
</span>  <span>background: #fff;
</span>  <span>cursor: pointer;
</span><span>}</span>

Jika anda telah membaca artikel atau dua tentang menggunakan elemen borang sebagai penggantian JavaScript, maka anda harus tahu bahawa kita perlu menggunakan unsur -unsur input dan label bersama -sama, supaya jika salah satu daripada kedua -duanya telah dikeluarkan, tiada apa yang akan berfungsi. Oleh itu, kami mempunyai input kotak semak dengan dan label dengan atribut yang sesuai dengan nilai ID. Saya juga telah menambah kelas Tetapan-BTN untuk digunakan untuk cangkuk CSS kami.

Di CSS, label diberi kedudukan: pengisytiharan tetap dengan sifat arah/nilai yang sesuai (atas dan kanan).

seterusnya adalah kotak putih yang akan hampir mengandungi butang:

HTML pertama:

<span><!-- the white box that contains the buttons -->
</span><span><span><span><div</span> class<span>="buttons-wrapper settings-box-element"</span>></span><span><span></div</span>></span></span>

dan CSS:

<span><span>.buttons-wrapper</span> {
</span>  <span>position: fixed;
</span>  <span>top: 130px;
</span>  <span>right: -200px; /* should match element width */
</span>  <span>width: 200px;
</span>  <span>height: 240px;
</span>  <span>background: #fff;
</span><span>}</span>

Kotak adalah elemen div tunggal dengan kelas "butang-pembalut" dan "tetapan-kotak-elemen". Seperti yang saya katakan sebelum ini, kelas yang kedua digunakan terutamanya untuk memberikan unsur-unsur nilai z-indeks. "Butang-pembalut" digunakan untuk gaya elemen Div. Dan seperti yang anda lihat, div diberi lebar 200px dan ketinggian 240px untuk menampung 5 butang yang anda lihat dalam demo. Juga, div diberi nilai kedudukan tetap dan sifat kanan dan atas yang sesuai. Satu -satunya perkara yang anda perlu ingat di sini adalah bahawa harta yang betul harus mempunyai nilai yang sama seperti lebar tetapi dalam negatif (untuk membuatnya hilang dari viewport).

sekarang lihat kod untuk markup yang tinggal, iaitu, 5 butang. Komen menunjukkan gaya latar belakang yang mereka kendalikan:

<span><!-- background styles -->
</span><span><!-- light background (#eaeaea) -->
</span><span><span><span><input</span> id<span>="light-layout"</span> class<span>="light-layout"</span> type<span>="radio"</span> name<span>="layout"</span> checked></span>
</span><span><span><span><label</span> for<span>="light-layout"</span> class<span>="layout-buttons settings-box-element"</span>></span>
</span>Light Background<span><span><span></label</span>></span>
</span>
<span><!-- dark background (#494949) -->
</span><span><span><span><input</span> id<span>="dark-layout"</span> class<span>="dark-layout"</span> type<span>="radio"</span> name<span>="layout"</span>></span>
</span><span><span><span><label</span> for<span>="dark-layout"</span> class<span>="layout-buttons settings-box-element"</span>></span>
</span>Dark Background
<span><span><span></label</span>></span>
</span>
<span><!-- image background -->
</span><span><span><span><input</span> id<span>="image-layout"</span> class<span>="image-layout"</span> type<span>="radio"</span> name<span>="layout"</span>></span>
</span><span><span><span><label</span> for<span>="image-layout"</span> class<span>="layout-buttons settings-box-element"</span>></span>
</span>Image Background<span><span><span></label</span>></span>
</span>
<span><!-- pattern background -->    
</span><span><span><span><input</span> id<span>="pattern-layout"</span> class<span>="pattern-layout"</span> type<span>="radio"</span> name<span>="layout"</span>></span>
</span><span><span><span><label</span> for<span>="pattern-layout"</span> class<span>="layout-buttons settings-box-element"</span>></span>
</span>Pattern Background<span><span><span></label</span>></span>
</span>
<span><!-- hide/show content -->
</span><span><span><span><input</span> id<span>="hide-show-content"</span> class<span>="hide-show-content"</span> type<span>="checkbox"</span>></span>
</span><span><span><span><label</span> for<span>="hide-show-content"</span> class<span>="layout-buttons settings-box-element"</span>></span>
</span>Hide/Show content<span><span><span></label</span>></span></span>

dan inilah CSS:

<span><span>.layout-buttons</span> {
</span>  <span>display: block;
</span>  <span>width: 150px;
</span>  <span>padding: 10px 0;
</span>  <span>text-align: center;
</span>  <span>border: 2px solid black;
</span>  <span>box-sizing: border-box;
</span>  <span>font-size: 0.875em;
</span>  <span>cursor: pointer;
</span><span>}
</span>
<span><span>.light-layout + label</span> {
</span>  <span>position: fixed;
</span>  <span>top: 140px;
</span>  <span>right: -150px;
</span><span>}
</span>
<span><span>.dark-layout + label</span> {
</span>  <span>position: fixed;
</span>  <span>top: 185px;
</span>  <span>right: -150px;
</span><span>}
</span>
<span><span>.image-layout + label</span> {
</span>  <span>position: fixed;
</span>  <span>top: 230px;
</span>  <span>right: -150px;
</span><span>}
</span>
<span><span>.pattern-layout + label</span> {
</span>  <span>position: fixed;
</span>  <span>top: 275px;
</span>  <span>right: -150px;
</span><span>}
</span>
<span><span>.hide-show-content + label</span> {
</span>  <span>position: fixed;
</span>  <span>top: 320px;
</span>  <span>right: -150px;
</span><span>}</span>

Perhatikan bahawa kotak semak pertama diberikan atribut "diperiksa". Itu kerana kita mahu ia menjadi yang diserlahkan secara lalai.

Setiap medan input mempunyai ID dan setiap label mempunyai atribut yang sepadan dengan ID untuk salah satu medan input. Dan seperti yang anda mungkin atau mungkin tidak tahu, rahsia di sebalik teknik sedemikian adalah untuk atribut, kerana apabila label dengan atribut diklik, elemen yang dikaitkan dengan label tertentu akan dipilih/diperiksa dan ini membolehkan kita Untuk menggunakan: pemilih yang diperiksa.

Semua label di atas mempunyai kelas "susun atur". Kelas ini digunakan untuk memberikan butang lalai dan gaya biasa seperti lebar, padding, sempadan, dan lain -lain. Kelas -kelas lain digunakan untuk menambah gaya unik untuk masing -masing. Dan seperti yang anda lihat untuk ikon gear dan kotak putih, sifat kedudukan digunakan dengan nilai tetap dan sifat atas dan kanan yang sesuai. Perhatikan bahawa nilai teratas untuk setiap label adalah 45px lebih besar daripada yang sebelum ini; Ini adalah untuk membuat butang timbunan di atas satu sama lain dengan baik dan tanpa tumpang tindih. Perhatikan juga bahawa nilai harta yang betul adalah sama dengan lebar butang tetapi dalam negatif.

sekarang lihat bahagian terakhir kod CSS kami:

<span>/* we don't want the input fields to appear, all we need is the labels */
</span><span>input<span><span>[type="checkbox"]</span>, input<span>[type="radio"]</span></span> {
</span>  <span>position: absolute;
</span>  <span>visibility: hidden;
</span><span>}
</span>
<span><span>.settings-box-element</span> {
</span>  <span>z-index: 10;
</span><span>}</span>

CSS di atas digunakan untuk menukar gaya lalai label yang berkaitan dengan butang radio yang dipilih (kami mempunyai 4 butang radio). Saya menggunakan pemilih saudara bersebelahan untuk menargetkan setiap label yang didahului oleh medan input jenis "Radio". Jadi seperti yang anda lihat, latar belakang dan sifat sempadan diberi nilai #e83737 (warna kemerahan) dan sifat warna #FFF nilai. Tidak ada yang benar -benar mewah atau kompleks.

unsur -unsur yang tinggal di HTML akan dibungkus di dalam div:

<span><!-- the gear icon that opens the box when you click on it -->
</span><span><span><span><input</span> id<span>="settings-btn"</span> class<span>="settings-btn"</span> type<span>="checkbox"</span>></span>
</span><span><span><span><label</span> for<span>="settings-btn"</span> class<span>="settings-box-element"</span>></span><span><span></label</span>></span></span>

notis dalam kod di atas yang saya letakkan setiap elemen kotak tetapan secara bebas di mana saya hanya boleh membungkusnya semua di dalam elemen div atau bahagian dan meletakkan satu elemen tunggal ini, oleh itu membuat perkara lebih mudah. Ini dilakukan semata -mata kerana anda tidak boleh memilih elemen induk, hanya adik beradik.

Jadi dalam kes ini, semua kandungan utama dibalut di dalam div dengan. Dan seperti yang anda lihat kemudian, untuk dapat mengubah gaya untuk div ini, kita perlu memilih div itu dengan menulis sesuatu yang serupa dengan ini:

<span><span>.settings-btn + label</span> {
</span>  <span>position: fixed;
</span>  <span>top: 130px;
</span>  <span>right: 0;
</span>  <span>display: block;
</span>  <span>width: 35px;
</span>  <span>color: #e83737;    
</span>  <span>text-align: center;
</span>  <span>background: #fff;
</span>  <span>cursor: pointer;
</span><span>}</span>

di sini saya menggunakan pemilih saudara umum untuk memilih div utama, yang merupakan satu -satunya cara untuk melakukannya.

mengklik ikon gear

Klik ikon gear harus membuat kotak tetapan muncul. Inilah kod untuk membuatnya berlaku:

<span><!-- the white box that contains the buttons -->
</span><span><span><span><div</span> class<span>="buttons-wrapper settings-box-element"</span>></span><span><span></div</span>></span></span>

Apabila pengguna mengklik ikon gear, kotak semak dengan akan dipilih, dan di sini datang sihir. Sebaik sahaja ikon gear diklik, yang berikut akan berlaku:

1. Menggunakan pemilih saudara bersebelahan (), label yang datang segera selepas kotak semak itu akan dipilih dan kemudian memindahkan 200 piksel dari kanan viewport.

2. Menggunakan pemilih saudara umum ~, unsur-unsur dengan kelas "butang-pembungkus" dan "susun atur-button" akan dipilih dan kemudian dipindahkan supaya mereka 0 piksel dan 30 piksel, dari kanan Viewport.

Kedua -dua pemilih saudara bersebelahan dan pemilih saudara umum sangat diperlukan di sini kerana teknik ini tidak akan berfungsi tanpa mereka.

Menukar latar belakang

izinkan saya mengingatkan anda tentang kod HTML untuk butang radio:

<span>/* we don't want the input fields to appear, all we need is the labels */
</span><span>input<span><span>[type="checkbox"]</span>, input<span>[type="radio"]</span></span> {
</span>  <span>position: absolute;
</span>  <span>visibility: hidden;
</span><span>}
</span>
<span><span>.settings-box-element</span> {
</span>  <span>z-index: 10;
</span><span>}</span>

Latar belakang yang akan kita ubah adalah latar belakang elemen .main-wrapper. Inilah CSS:

<span><!-- the gear icon that opens the box when you click on it -->
</span><span><span><span><input</span> id<span>="settings-btn"</span> class<span>="settings-btn"</span> type<span>="checkbox"</span>></span>
</span><span><span><span><label</span> for<span>="settings-btn"</span> class<span>="settings-box-element"</span>></span><span><span></label</span>></span></span>

anda dapat melihat bahawa dalam HTML kita mempunyai 4 elemen input Type = "Radio" dan 4 label. Apabila mana-mana label diklik, input yang dikaitkan dengan label tertentu akan dipilih dan oleh itu dipadankan dengan: kelas pseudo yang diperiksa. Kemudian, bergantung pada label mana yang diklik, salah satu daripada empat gaya di atas akan digunakan untuk pembungkus utama.

menyembunyikan/menunjukkan kandungan

Untuk elemen pertunjukan/menyembunyikan, saya menggunakan kotak semak:

<span><span>.settings-btn + label</span> {
</span>  <span>position: fixed;
</span>  <span>top: 130px;
</span>  <span>right: 0;
</span>  <span>display: block;
</span>  <span>width: 35px;
</span>  <span>color: #e83737;    
</span>  <span>text-align: center;
</span>  <span>background: #fff;
</span>  <span>cursor: pointer;
</span><span>}</span>

dan inilah CSS:

<span><!-- the white box that contains the buttons -->
</span><span><span><span><div</span> class<span>="buttons-wrapper settings-box-element"</span>></span><span><span></div</span>></span></span>

Dalam kes ini, kami memberitahu penyemak imbas untuk memilih elemen dengan dan menetapkannya untuk memaparkan: tiada "apabila pengguna mengklik pada label yang berkaitan, oleh itu memilih kotak semak.

Kesimpulan

Terdapat banyak perkara lain yang boleh anda lakukan menggunakan teknik pemilih ini dan hadnya adalah kreativiti anda sendiri. Jika teknik ini baru kepada anda, saya harap artikel ini dapat berfungsi sebagai titik permulaan bagi anda untuk bereksperimen dengan kemungkinan lain.

Di bawah anda akan menemui demo yang lengkap:

Lihat pena gaya pena dengan CSS tulen menggunakan: diperiksa oleh SitePoint (@SitePoint) pada codepen.

Soalan Lazim (Soalan Lazim) Mengenai Membina Pengubah Gaya dengan CSS Murni Menggunakan Daftar

Apakah tujuan: kelas pseudo yang diperiksa di CSS? , atau elemen pilihan yang telah dipilih oleh pengguna. Ia adalah alat yang berkuasa yang membolehkan pemaju membuat laman web interaktif dan dinamik tanpa memerlukan JavaScript. Sebagai contoh, ia boleh digunakan untuk membuat penukar gaya, di mana pengguna boleh mengubah penampilan laman web dengan memilih pilihan yang berbeza. : Memeriksa kerja kelas pseudo dengan memilih elemen HTML yang kini dipilih atau diperiksa. Ia biasanya digunakan dengan elemen bentuk seperti kotak semak atau butang radio. Apabila pengguna memilih atau memeriksa salah satu daripada elemen ini,: kelas pseudo yang diperiksa menjadi aktif dan menggunakan gaya CSS yang ditentukan untuk elemen tersebut. Ini boleh digunakan untuk menyerlahkan pilihan yang dipilih, menunjukkan atau menyembunyikan kandungan, atau bahkan mengubah susun atur laman web. > Yang diperiksa: Pseudo-Class terutamanya digunakan dengan elemen bentuk seperti kotak semak, butang radio, dan elemen pilihan. Walau bagaimanapun, ia juga boleh digunakan dengan elemen lain dalam kombinasi dengan atribut HTML5 'contentedable'. Ini membolehkan anda membuat kandungan interaktif yang boleh diedit oleh pengguna, dan gaya dengan cara yang berbeza apabila ia berada dalam keadaan 'diperiksa' atau 'dipilih'.

bagaimana saya boleh menggunakan: kelas pseudo yang diperiksa untuk membuat penukar gaya? kotak semak untuk setiap pilihan gaya. Kemudian, dalam CSS anda, anda akan menggunakan: kelas pseudo yang diperiksa untuk memohon gaya yang berbeza bergantung pada pilihan mana yang dipilih. Ini boleh melibatkan perubahan skema warna, fon, susun atur, atau aspek lain dari penampilan halaman web. : Diterangkan kelas pseudo boleh digunakan untuk membuat kandungan dinamik. Dengan menggabungkannya dengan pemilih dan sifat CSS yang lain, anda boleh menunjukkan atau menyembunyikan kandungan, menukar susun atur, atau membuat ciri interaktif berdasarkan pilihan pengguna. Ini dapat meningkatkan pengalaman pengguna dan menjadikan laman web anda lebih menarik dan interaktif. Daripada: kelas pseudo yang diperiksa adalah bahawa ia membolehkan anda membuat ciri-ciri interaktif tanpa memerlukan JavaScript. Walaupun JavaScript adalah alat yang berkuasa untuk pembangunan web, ia juga boleh menjadi kompleks dan sukar digunakan. The: Pseudo-Class yang diperiksa menyediakan alternatif yang lebih mudah untuk membuat kandungan interaktif. Semua pelayar moden, termasuk Chrome, Firefox, Safari, dan Edge. Walau bagaimanapun, ia tidak disokong dalam versi Internet Explorer 8 atau terdahulu. Oleh itu, jika anda perlu menyokong penyemak imbas yang lebih tua ini, anda mungkin perlu menggunakan penyelesaian berasaskan JavaScript. > Ya, yang diperiksa: Pseudo-Class boleh digunakan untuk kotak semak gaya dan butang radio. Secara lalai, unsur-unsur bentuk ini mempunyai penampilan yang sangat asas, tetapi dengan: kelas pseudo yang diperiksa, anda boleh menyesuaikan penampilan mereka untuk memadankan seluruh laman web anda. Anda boleh menukar warna, saiz, bentuk, dan juga animasi unsur-unsur ini apabila dipilih. Daftar pseudo yang diperiksa biasanya digunakan untuk mencipta ciri interaktif seperti penukar gaya, akordion, tab, dan modal. Ia juga boleh digunakan untuk gaya bentuk elemen seperti kotak semak dan butang radio, atau untuk membuat kandungan yang boleh diedit dengan atribut 'contentedable'. Keupayaannya untuk bertindak balas terhadap input pengguna menjadikannya alat yang berkuasa untuk meningkatkan pengalaman pengguna.

Adakah terdapat sebarang batasan atau kelemahan untuk menggunakan: kelas pseudo yang diperiksa? Ia hanya boleh memilih elemen yang kini dipilih atau diperiksa, jadi ia tidak boleh digunakan untuk elemen gaya berdasarkan keadaan atau keadaan lain. Di samping itu, ia tidak disokong dalam versi Internet Explorer 8 atau terdahulu. Walaupun terdapat batasan -batasan ini, ia masih merupakan alat yang berharga untuk mewujudkan kandungan web interaktif dan dinamik.

Atas ialah kandungan terperinci Membina penukar gaya dengan CSS tulen menggunakan: diperiksa. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!