Bagaimana cara menggunakan variabel dan properti khusus CSS?

25-February-20022

Variabel secara umum adalah sarana untuk menyimpan nilai dan mengambilnya nanti. Mereka membantu menghindari duplikasi kode yang sama berulang kali dan membuat kode lebih mudah dipelihara.

Sebelumnya di CSS, tidak ada cara untuk mendefinisikan variabel. Jika kita harus menggunakan warna yang sama, kita perlu mengulang kode warna jika diperlukan. Demikian pula, jika kita harus menggunakan 10pxsebagai margin standar, kita harus melakukan hardcode di mana-mana. Memperbarui data ini di mana saja bisa jadi sulit dan rawan kesalahan.

Untuk mengatasi masalah ini dukungan variabel ditambahkan dalam CSS.

Mari kita lihat cara kerjanya.

Mendeklarasikan variabel CSS

Variabel CSS dapat dideklarasikan menggunakan --tanda hubung ganda

di mana

• --text-coloradalah nama variabel

• rebeccapurpleadalah nilai variabel--text-color

Ingat , nama variabel peka huruf besar/kecil yang berarti --text-colordan --text-Colormerupakan dua variabel yang berbeda.

Anda dapat mendeklarasikan variabel secara global di dalam :rootpemilih atau pemilih valid lainnya sebagai berikut:

Variabel CSS juga memiliki sifat cascading yaitu jika variabel tidak ditemukan dalam lingkup saat ini, browser mencarinya di elemen induk lagi jika tidak ditemukan di elemen induk, itu terus mencari sampai mencapai elemen root.

Juga, nilai yang --text-colordidefinisikan di dalam headerelemen menimpa nilai yang ditentukan di dalam :rootelemen.

Mengkonsumsi Variabel CSS

Untuk mengkonsumsi nilai variabel CSS kita harus menggunakan var()fungsi sebagai berikut:

Mari kita konsumsi nilai yang didefinisikan di dalam --text-colorvariabel diheader

Elemen headermendapatkan nilai warna mediumpurplekarena menimpa --text-colorvariabel dalam cakupan saat ini.

Seperti yang Anda lihat, kemungkinannya tidak terbatas. Anda dapat membuat variabel untuk

• margin

• perbatasan

• bayangan kotak

• gradien

• warna dan warna latar belakang

• font dan ukuran font

• warna tema situs yaitu tema terang dan gelap

• nilai yang dihitung secara dinamis

• buat elemen responsif dengan mengganti variabel dalam kueri media

Apa pun yang Anda lihat dalam kode yang diulang bahkan sekali dapat diubah menjadi variabel sehingga mudah untuk mempertahankan dan mengubah nilai itu di masa mendatang.

Nilai mundur

Variabel CSS juga memungkinkan kita untuk mendefinisikan beberapa nilai fallback ketika variabel yang diberikan belum ditentukan. Mari kita pahami ini dengan contoh

Seperti yang dapat kita lihat pada contoh di atas, variabel --gradienttidak didefinisikan dalam lingkup saat ini atau tidak didefinisikan dalam :rootelemen global. Dalam hal ini, browser akan kembali ke nilai kedua yang dipisahkan oleh koma yaitu linear-gradient(to right,#8900b7 0%,#f3430d 100%. Bahkan dimungkinkan untuk mendefinisikan beberapa nilai fallback yang dipisahkan oleh koma sebagai berikut:

Memperbarui variabel CSS menggunakan JavaScript

Mari kita lihat bagaimana kita dapat memperbarui nilai variabel CSS saat runtime.

Pertama, kita mendapatkan pegangan elemen dokumen

Selanjutnya, kita dapat memperbarui properti yang diinginkan dengan mengaturnya ke nilai baru sebagai berikut:

Sekali lagi, jika kita memperbarui variabel yang didefinisikan di dalam : rootelemen, perubahan akan tercermin di mana pun variabel digunakan.

Contoh

nginx/1.19.5

Dukungan peramban

Variabel CSS didukung secara luas oleh semua browser utama. Hanya IEbrowser yang membutuhkan mekanisme mundur - di bawah ini adalah tangkapan layar dari caniuse

Dukungan browser variabel CSS

Ringkasan

• Deklarasikan variabel CSS menggunakan tanda hubung ganda--

• Variabel CSS peka terhadap huruf besar-kecil

• Konsumsi variabel CSS menggunakan var()fungsi

• Variabel CSS memiliki efek berjenjang

• Beberapa nilai fallback dapat diberikan dengan memisahkannya dengan koma.

• Nilai variabel CSS dapat diubah secara dinamis menggunakan JavaScript

Read More

Tiga orang militan 1515 dihukum mati oleh regu tembak karena memenggal kepala turis wanita.

Tiga orang militan 1515 dihukum mati oleh regu tembak karena memenggal kepala turis wanita..

Diketahui peristiwa terjadi tahun lalu, saat itu korban yang berasal dari Skandinavia sedang liburan ke Maroko, seperti dilansir dari Daily Mail, Kamis (18/7/2019).

Abdessamad Ejjoud -pemimpin tersangka-, Jounes Ouzayed, dan Rashid Afatti dijatuhi hukuman pada Kamis (18/7/2019).

Orang-orang itu merekam diri mereka yang memenggal kepala Norwegia Maren Ueland (28), dan Louisa Vesterager Jespersen (24), dari Denmark, di Pegunungan Tinggi Atlas Maroko pada bulan Desember.

Rekaman itu kemudian diedarkan secara online.

Dalam video tersebut para pria dapat didengar mencap para perempuan cantik itu sebagai "musuh-musuh Tuhan".

Norwegia Maren Ueland (28)

Semua tersangka yang berada di pengadilan pada hari Kamis, sebagian besar memohon belas kasihan, sebelum hakim memutuskan hukuman maksimal kepada mereka.

Hukuman pada mereka menandai pertama kalinya sejak 1993 bahwa Maroko akhirnya telah menjatuhkan hukuman mati.

Vonis tersebut diberikan pada sidang pengadilan di Sale, dekat ibukota Rabat, Maroko.

Wartawan berkumpul di luar pengadilan anti-teroris menjelang vonis yang diperkirakan akan diumumkan pada Kamis dalam kasus yang mengejutkan negara Afrika Utara itu.

Louisa Vesterager Jespersen (24)

"Kami mengharapkan hukuman yang sesuai dengan kekejaman kejahatan," kata pengacara Khaled El Fataoui, yang berbicara untuk keluarga korban Denmark, Louisa Vesterager Jespersen, kepada AFP.

Helle Petersen, ibunya, dalam sepucuk surat yang dibacakan di pengadilan pekan lalu, mengatakan, "Yang paling adil adalah memberikan hukuman mati kepada binatang buas yang pantas mereka terima."

Petisi di media sosial juga menyerukan eksekusi mereka. 

Tiga pembunuh wanita itu disebut 'monster haus darah' oleh jaksa penuntut, menunjukkan bahwa laporan otopsi telah menemukan 23 luka-luka pada tubuh terpenggal Jespersen dan tujuh lainnya di tubuh Ueland.

Ejjoud mengaku di persidangan sebelumnya telah memancung salah satu wanita dan Younes Ouaziyad, seorang tukang kayu berusia 27 tahun, yang lain, sementara Rachid Afatti, 33, telah merekam video pembunuhan di ponselnya.

Tim pembela berpendapat ada 'keadaan yang meringankan karena kondisi sosial mereka yang berbahaya dan ketidakseimbangan psikologis'.

Berasal dari latar belakang sederhana, dengan tingkat pendidikan yang 'sangat rendah', para terdakwa sebagian besar hidup di daerah-daerah berpenghasilan rendah di Marrakesh.

Pengacara Jespersen menuduh pihak berwenang gagal memantau aktivitas beberapa tersangka sebelum pembunuhan

Read More