Inilah 6 Properti CSS yang Belum Banyak Dikenal Developer

Last Updated on March 31, 2022 by

CSS adalah bahasa pemrograman dengan fungsi unik. Berbeda dengan bahasa pemrograman lainnya, CSS digunakan untuk melakukan styling khusus pada tampilan project website dan juga aplikasi.  Karena fungsinya yang khas dan tiada duanya inilah, CSS masih banyak digunakan oleh para programmer sampai hari ini.

Anda yang menguasai bahasa pemrograman CSS tentunya sudah akrab dengan properti. Namun tahukah Anda bahwa ada 6 properti CSS yang tidak banyak dikenal oleh developer?

Anda juga beruntung karena artikel kali ini akan membahas 6 properti CSS beserta fungsinya yang belum dikenal banyak developer. Tentunya Anda juga bisa mengoptimalkan pemrograman styling dengan memakai keenam properti CSS berikut ini. Selamat membaca!

Melihat Kembali CSS: Apa Itu CSS Properti?

Setiap bahasa pemrograman tentunya memiliki elemen yang menjadi ciri khasnya. Dalam bahasa pemrograman CSS, elemen properti adalah kekhasan tersendiri sekaligus unsur dasar yang harus dikuasai setiap programmer spesialis bahasa ini.

Apa itu properti CSS? Properti CSS adalah sebuah elemen dan jenis style dari tag HTML yang dapat Anda ubah sesuai keinginan. Dengan memanfaatkan properti CSS ini, Anda bisa melakukan aneka kustomisasi sehingga memperoleh hasil akhir berupa tampilan tertentu untuk website dan aplikasi.

Dari definisi di atas pula, Anda dapat melihat bahwa CSS selalu ‘saling melengkapi’ dengan HTML. Ketika HTML bertanggung jawab untuk membangun isi atau bagian fungsional dari website, maka CSS dan semua propertinya digunakan untuk membungkus bagian isi agar lebih menarik dan mudah dipakai user.

Ada banyak sekali jenis properti CSS beserta fungsinya. Ya, setiap jenis properti CSS pasti memiliki fungsi yang berbeda. Semisal properti CSS untuk mengubah font style adalah font-style, font-size, dan font-family.

Uniknya, seiring perkembangan waktu, jumlah properti CSS pun bertambah. Kembali pada contoh CSS untuk styling font – kini ada lebih banyak properti yang kita punya untuk melaksanakan tugas tersebut. Sekarang, contoh-contoh properti CSS untuk mengubah font style adalah font, font-variant, font-style, font-weight, font-family, dan font-size.

Memang, menguasai tipe-tipe properti seperti properti CSS untuk mengubah font style adalah hal yang biasa bagi programmer CSS. Namun bagaimana jadinya jika ternyata ada properti CSS yang keberadaannya selama ini menjadi ‘rahasia’? Melebihi pengetahuan yang sudah Anda miliki, ternyata ada 6 properti CSS yang baru-baru ini fungsinya terkuak ke publik.

6 Properti CSS Beserta Fungsinya yang Belum Anda Ketahui Sampai Sekarang

Dinamika perkembangan dunia IT memang sangat cepat dan sering mengejutkan. Ada begitu banyak informasi dalam dunia IT yang faktanya belum terkuak oleh manusia, bahkan pada hal-hal yang sudah dirasa terkenal sekalipun. Alhasil, wajar saja jika rasanya dunia IT tidak pernah habis dengan update terbaru.

Kini, penemuan tersebut datang dari bahasa pemrograman CSS, khususnya pada fungsi propertinya. Meskipun sampai hari ini sudah ada puluhan, atau mungkin ratusan, jenis properti pada CSS, ternyata masih ada 6 jenis CSS properti dan trik yang tidak banyak diketahui oleh programmer profesional.

Apa sajakah? Berikut jawabannya:

Writing-Mode

Tipe properti pertama adalah writing-mode. Fungsi properti ini adalah memungkinkan programmer untuk meletakkan teks dalam website dalam posisi-posisi yang tidak biasa, seperti miring vertikal di kanan, vertical ke kiri, dan memanjang horizontal atau sideways.

Jika Anda pernah kebetulan mendapati website dengan teks yang sengaja didesain dalam bentuk vertikal atau sideways, besar kemungkinan website tersebut mengaplikasikan CSS properti writing-mode.

CSS properti writing-mode mendukung sejumlah value, yakni:

sideways-lr

Teks dengan value ini akan tampil secara vertikal dari atas ke bawah menghadap ke arah kiri.

sideways-rl

Teks dengan value ini akan tampil secara vertikal dari atas ke bawah menghadap ke arah kanan.

horizontal-tb

Value ini berguna untuk menampilkan tampilan standar dari teks pada website.

vertical-lr

Teks ditampilkan secara horizontal seperti biasa dari kiri ke kanan. Namun jika teks terdiri lebih dari 1 baris, maka baris ke-2 dan seterusnyaa akan ditempatkan otomatis di bagian kanan setelah bagian sebelumnya (rata kanan).

vertical-rl

Mirip seperti pada fungsi vertical-lr. Bedanya, value ini menghadirkan teks dalam susunan rata kiri.

User-Select

Pernah menemukan website yang isi kontennya tidak bisa Anda copy dan paste? Website tersebut sudah dipastikan menggunakan fungsi CSS properti user-select.

CSS properti user-select sengaja diaplikasikan agar pengunjung website tidak bisa seenaknya men-copy dan paste konten-konten yang dipublikasikan website tersebut. Bisa dibilang bahwa CSS properti yang satu ini memiliki dampak positif dalam memberantas aksi plagiarisme.

User-select memungkinkan Anda untuk menentukan teks mana saja yang bisa bebas diklik dan copy oleh pengunjung, dan mana yang tidak. Contoh coding pengaplikasian CSS user-select:

.row-of-icons {
-webkit-user-select: none;  /* Chrome all */
-moz-user-select: none;     /* Firefox all */
-ms-user-select: none;      /* IE */
user-select: none;
}

All

Berikutnya adalah CSS properti all. Properti ini bisa menyederhanakan kinerja pada CSS framework Anda, khususnya untuk mengeliminasi elemen-elemen yang tidak dibutuhkan secara lebih praktis.

Terdapat 3 jenis value pada properti all ini, yakni initial (all:initial) untuk mereset elemen seperti sediakala sebelum diedit, unset (all:unset) dan inherit (all:inherit). Contoh coding pengaplikasiannya:

.header{
all:initial;
color: red;
font-size: 28px;
}

Border-Image

Sesuai namanya, CSS properti border-image bermanfaat untuk menambahkan garis frame atau border khusus pada gambar yang ada di website Anda.

Anda bisa dengan praktis membuat garis border yang cantik dan menarik sesimpel memakai fungsi ini saja. Anda juga bisa membuat custom border dari aneka gambar yang diinginkan. Dengan adanya border, Anda dapat lebih mudah menonjolkan informasi penting pada website ke pengunjung.

Tak mengherankan sejumlah desainer website tertarik untuk mengaplikasikan CSS properti yang satu ini pada website mereka.

Contoh coding pengaplikasian properti border-image:

<body>
<h1>Selamat Datang</h1>
</body><!-- CSS below -->h1{
border: 14px solid transparent;
padding: 20px;
border-image: url(border.png) 25% round;
}

White-Space

Berikutnya adalah properti white-space. Properti white-space bisa digunakan saat Anda mengaplikasikan CSS properti text-overflow. Saat digunakan, properti white-space berfungsi untuk mengatur alur teks dari sebuah elemen agar rapi atau tersusun sesuai keinginan Anda.

Ada sejumlah value yang bisa di-input dalam fungsi properti white-space ini, antara lain: normal, nowrap, pre, pre-line dan pre-wrap.

• Value pre digunakan untuk mengarahkan browser melakukan render terhadap spasi kosong dan garis batas yang sesungguhnya ada dalam barisan kode, namun tidak terlihat dalam tampilan default.
• Value pre-wrap memiliki kegunaan yang mirip dengan pre. Tetapi, pre-wrap juga bisa digunakan untuk ‘membungkus’ teks yang terdapat dalam sebuah elemen tertentu.
• Value nowrap mencegah terjadinya overflow teks dan wrapping (pembungkusan) elemen yang tak perlu.
• Value pre-line digunakan untuk memutus baris sesuai dengan titik akhir dari susunan kodenya dan menyisakan garis spasi putih yang tidak dirender.

Contoh coding pengaplikasian CSS properti white-space:

div{
width:200px;
}
p{
background:blue;
font-size:3rem;
}
.first{
white-space:nowrap;
}
.second{
white-space:pre;
}
.third{
white-space:pre-line;
}
.fourth{
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
}

Background-Clip

CSS properti terakhir adalah background-clip. Background-clip juga merupakan CSS properti yang unik. Berbeda dengan properti lainnya, background-clip bisa digunakan untuk mengatur grafis kustom sebagai elemen dari latar belakang (background) website. Kemudian, elemen grafis kustom ini bisa digunakan sebagai elemen untuk mempercantik border-boks, konten-boks, dan padding-boks.

Contoh coding implementasi sederhana dari background-clip adalah:

<p class=”border-box”>The background extends behind the border.</p>
<p class=”padding-box”>The background extends to the inside edge of the border.</p>
<p class=”content-box”>The background extends only to the edge of the content box.</p>
<p class=”text”>The background is clipped to the foreground text.</p>

 p {
border: .10em blue;
border-style: dotted;
margin: 3em 0;
padding: 1.5em;
background: linear-gradient(70deg, green, orange, green, orange, green);
font: 800 1.5em arial;
text-decoration: bold;
}

.border-box { background-clip: border-box; }
.padding-box { background-clip: padding-box; }
.content-box { background-clip: content-box; }

.text {
background-clip: text;
-webkit-background-clip: text;
color: rgba(153,0,204,1);
}

Demikianlah pembahasan artikel edisi kali ini seputar 6 CSS properti yang kegunaannya masih jarang diketahui oleh para developer CSS, termasuk yang profesional sekalipun. Jumlah CSS properti memang sudah sangat banyak, namun bukan berarti perkembangannya akan berhenti sampai di sini. Mungkin saja kelak kita akan mendapati lebih banyak jenis CSS properti yang lebih canggih dan unik untuk mendesain styling website.

Ada baiknya Anda mengombinasikan penggunaan CSS properti dalam mendesain bagian front end website agar hasil kerja menjadi lebih baik dan cepat. Jangan lupa juga untuk turut mempelajari CSS, HTL dan JavaScript karena ketiga bahasa pemrograman ini adalah kunci sukses dalam dunia programming website.

Untuk itu, yuk ikuti website Appkey.id agar tidak ketinggalan informasi dan tips trik belajar aneka bahasa pemrograman terkini gratis setiap hari. Anda pun bisa sekaligus melakukan konsultasi terkait pengembangan website dan aplikasi gratis dari tenaga IT profesional setiap harinya. Langsung klik www.appkey.co.id sekarang juga, ya! Sampai jumpa lagi!