7 Teknik CSS Baru yang Menakjubkan Untuk 2019

Diterbitkan: 2019-05-01

Inilah saat yang tepat untuk memilih pengembangan web sebagai pilihan karir. Sama seperti desainer web, pengembang web juga terpesona dengan cara mencoba teknik CSS baru dan mendorong batas dari apa yang dapat dilakukan CSS.

Di sini, kita akan melihat beberapa teknik CSS baru dan seluruh spesifikasi yang masuk ke dalam desain kreatif. Anda dapat mengontrol hampir semua aspek desain dengan CSS yang dijelaskan dengan baik. Selain itu, ini dapat meningkatkan pengalaman pengguna yang lebih baik secara keseluruhan—dengan kode yang lebih bersih dan konsisten.

1. Huruf Awal

Huruf awal adalah properti CSS, properti yang memilih huruf pertama dari elemen dan menentukan jumlah baris yang ditempati oleh huruf. Paling sering digunakan di media cetak dan situs informasi, situs berita, di mana huruf pertama paragraf jauh lebih tinggi daripada konten lainnya.

Properti huruf awal secara otomatis menyesuaikan jumlah baris yang diperlukan untuk membuat topi drop bergaya dan ukuran font. Surat inisial menyetujui nilai-nilai berikut:

<number> mengacu pada berapa banyak baris yang ditempati surat di mana nilai negatif tidak diterima;
normal berguna jika Anda ingin mengatur ulang nilai jika dapat diwarisi dari kaskade dan tidak ada efek penskalaan yang diterapkan pada huruf pertama;
<integer> menentukan jumlah baris di mana huruf harus tenggelam ketika ukurannya telah diatur sebelumnya. Nilai harus lebih besar dari nol, dan jika nilainya tidak ditentukan, nilai ukuran digandakan, diturunkan ke bilangan bulat positif terdekat;

::first-letter pseudo-element dapat digunakan untuk memilih karakter yang akan diformat sebagai huruf awal. ::first-letter pseudo-element tidak memilih huruf pertama dari elemen yang memiliki tampilan: inline, tetapi hanya berfungsi pada elemen yang memiliki nilai tampilan blok, sel tabel, keterangan tabel, atau item daftar .

[xhtml]
<!DOCTYPE html>
<html>
<kepala>
<gaya>
P {
font-family: Serif;
ukuran font: 20px;
margin-bawah: -15px;
}
h1 {
font-family: Sans-serif;
ukuran font: 3.1em;
warna hitam;
}
tubuh {
bantalan: 10 piksel;
}
div {
lebar: 550 piksel;
tinggi garis: 25px;
}
p:tipe pertama:huruf pertama {
warna latar: hitam;
warna putih;
mengapung: kiri;
ukuran font: 50px;
margin-kanan: 10px;
margin-atas: 7px;
bantalan: 18 piksel;
box-shadow: 0 0 10px -2px hitam;
}
</ gaya>
</head>
<tubuh>
<h1>Tentang huruf awal</h1>
<div>
<p>Hanya orang yang mengabdikan dirinya untuk suatu tujuan dengan seluruh kekuatan dan jiwanya yang bisa menjadi master sejati. Untuk alasan ini penguasaan menuntut semua orang"</p>
<p>"Perhatian terhadap manusia dan nasibnya harus selalu menjadi perhatian utama dari semua upaya teknis. Jangan pernah lupakan ini di tengah diagram dan persamaan Anda"</p>
</div>
</tubuh>
</html>
[/xhtml]

Initial letter

2. Font Variabel

Font variabel mewakili serangkaian fitur baru yang didefinisikan sebagai bagian dari spesifikasi OpenType dan memungkinkan file font berisi beberapa variasi font dalam satu file, yang disebut font variabel. Dalam praktiknya, ini memungkinkan Anda untuk mengakses variabel yang terdapat dalam file font hanya dengan satu referensi @ font-face. Selain itu, font variabel memungkinkan fungsi seperti transisi gaya font, gaya font kustom, dan animasi. Manfaat menggunakan font variabel adalah Anda memiliki akses ke berbagai gaya, bobot, dan lebar yang tersedia.

Font variabel menentukan variasinya melalui sumbu variasi dan ada 5 sumbu standar:

ital: sumbu miring bekerja secara berbeda karena diaktifkan atau dinonaktifkan, tidak ada di antaranya. Nilai dapat diatur menggunakan properti CSS gaya font. Juga, dengan memperkenalkan font-synthesis: none, akan mencegah browser menerapkan secara tidak sengaja sumbu variasi dan miring yang disintesis.
wght: mengontrol berat font dan nilainya dapat diatur menggunakan properti CSS font-weight.
wdth: mengontrol lebar font dan nilainya dapat diatur menggunakan properti CSS font-width. Dalam CSS menggunakan properti font-stretch, kita dapat mengatur lebar font dengan nilai persentase dan jika kita memberikan nilai yang berada di luar font- domain yang disandikan, browser membuat font pada nilai terdekat yang diizinkan.
opsz: ukuran optik mengacu pada praktik mengubah ukuran optik font dan nilainya dapat diatur menggunakan ukuran font-optik CSS. Nilai ukuran optik diterapkan secara otomatis tergantung pada ukuran font, tetapi dapat dimanipulasi menggunakan variasi font -settings.Saat menggunakan font-optical-sizing, nilai yang diterima adalah otomatis atau tidak sama sekali, dan saat menggunakan font-variation-settings, nilai numerik disediakan.
slnt: mengontrol kemiringan font dan nilainya dapat diatur menggunakan properti CSS gaya font. Ini variabel dengan dinyatakan sebagai rentang numerik, dan ini memungkinkan font bervariasi di mana saja di sepanjang sumbu itu.

Menggunakan font variabel dengan @font-face – saat menggunakan font variabel di web, ini melibatkan penetapan aturan @ font-face yang menunjukkan file font variabel. Berikut adalah 2 tautan yang memungkinkan Anda menemukan font variabel: axis-praxis.org dan v -font.com.

[xhtml]
<!DOCTYPE html>
<html>
<kepala>
<title>Tentang font variabel</title>
</head>
<gaya>
@font-wajah {
font-family: 'Variabel Avenir Berikutnya';
src: url('https://cdn.rawgit.com/Monotype/Monotype_prototype_variable_fonts/f8067a0e/AvenirNext/AvenirNext_Variable.ttf') format('truetype');
}
html {
font-family: 'Variabel Avenir Berikutnya', sans-serif;
}
P {
font-variation-settings: 'wght' 630, 'wdth' 88;
}
</ gaya>
<tubuh>
<h1>Tentang font variabel</h1>
<h2>Tentang font variabel</h2>
<p>
"Setiap orang bodoh yang cerdas dapat membuat segalanya menjadi lebih besar dan lebih kompleks... Dibutuhkan sentuhan kejeniusan – dan banyak keberanian untuk bergerak ke arah yang berlawanan."
</p>
</tubuh>
</html>
[/xhtml]

Variablefonts

3. Sifat dan Nilai Logis

Properti dan Nilai Logis adalah modul CSS yang memperkenalkan properti dan nilai logis yang memungkinkan untuk mengontrol tampilan melalui arah logis dan pemetaan dimensi. Properti dan nilai logis menggunakan istilah seperti blok dan inline untuk menggambarkan arah alirannya. Spesifikasi Logical Properties and Values mencirikan pemetaan untuk nilai fisik dalam hubungan logisnya.

Dimensi inline – adalah dimensi di mana baris teks ditulis dalam jenis tulisan yang digunakan. Jadi, dalam dokumen bahasa Inggris acak, teksnya horizontal, dari kiri ke kanan, dalam dokumen Arab lain, penulisannya juga horizontal tetapi dari kanan ke kiri dan jika kita memperhitungkan dokumen Jepang, dimensi inline sekarang vertikal karena mode penulisan berjalan secara vertikal.

Dimensi blok – sesuai dengan urutan blok ditampilkan pada halaman. Dalam bahasa Inggris dan Arab mereka dieksekusi secara vertikal, sedangkan dalam mode penulisan vertikal apa pun mereka dieksekusi secara horizontal.

[xhtml]
<!DOCTYPE html>
<html>
<kepala>
<gaya>
html {
font: 20px Sans-serif;
}
tubuh {
bantalan: 25px;
latar belakang-warna: kuning muda;
warna hitam;
}
.kotak {
perbatasan: 4px hitam pekat;
batas-radius: 20px;
bantalan: 20 piksel;
margin: 12 piksel;
}
.satu {
ukuran blok: 100px;
ukuran sebaris: 200 piksel;
}
.dua {
tinggi: 100 piksel;
lebar: 200 piksel;
}
</ gaya>
</head>
<tubuh>
</div>
<div id="wadah">
<div class="kotak satu">
Ukuran blok saya adalah 100 piksel, ukuran inline saya 200px.
</div>
<div class="kotak dua">
Tinggi saya adalah 100 piksel, lebar saya 200px.
</div>
</div>
</tubuh>
</html>
[/xhtml]

Logical properties and values

4. Geser Geser

Properti CSS scroll-snap-type menentukan kekakuan titik lampiran yang diterapkan ke wadah gulir. Dengan kata lain, properti ini mengunci area pandang ke elemen atau lokasi tertentu setelah pengguna selesai menggulir. Ini adalah cara terbaik untuk menampilkan galeri gambar .Sebelumnya, ini dapat digunakan dengan JavaScript, tetapi berkat modul CSS Scroll Snap baru, efeknya dapat dikontrol di CSS. Penggertakan gulir dilakukan dengan mendefinisikan elemen induk / wadah dan anak-anak dalam wadah yang akan dijepret sesuai dengan aturan yang ditentukan dalam container.Properti tipe-scroll-snap adalah properti paling penting yang berlaku untuk elemen container.Mendefinisikan sumbu jepret gulir x, y, blok, sebaris atau keduanya dan keketatan jepret gulir tidak ada, kedekatan atau wajib.

[xhtml]
<!DOCTYPE html>
<html>
<kepala>
<gaya>
html, isi, .C {
tinggi: 50%;
}
.C {
tampilan: fleksibel;
align-item: tengah;
justify-content: ruang-antara;
flex-flow: kolom nowrap;
font-family: arial;
}
.wadah {
tampilan: fleksibel;
fleksibel: tidak ada;
melimpah: otomatis
}
.wadah.x {
lebar: 70%;
tinggi: 150 piksel;
flex-flow: baris sekarangrap;
}
.kontainer.y {
lebar: 256px;
tinggi: 256px;
flex-flow: kolom nowrap;
}
.y.mandatory-scroll-snapping {
scroll-snap-type: y wajib;
}
.x.proximity-scroll-snapping {
scroll-snap-type: x kedekatan;
}
.wadah > div {
perataan teks: tengah;
scroll-snap-align: tengah;
fleksibel: tidak ada;
}
.x.container> div {
tinggi garis: 128px;
ukuran font: 64px;
lebar: 100%;
tinggi: 128px;
}
.y.wadah> div {
tinggi garis: 256px;
ukuran font: 128px;
lebar: 256px;
tinggi: 256px;
}
.y.container>div:{
tinggi garis: 1.4;
ukuran font: 80px;
}
.wadah >div:{
latar belakang-warna: putih;
}
.wadah >div:{
latar belakang-warna: putih;
}
</ gaya>
</head>
<tubuh>
<div class=".C">
<div class="container x wajib-scroll-snapping" dir="ltr">
<div>Gulir Snapping</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<div class="container dan wajib-scroll-snapping" dir="ltr">
<div>Tentang Snapping Scropp</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</div>
</tubuh>
</html>
[/xhtml]

Scroll snapping

5. Grid Level 2 dan Subgrid

Spesifikasi level 2 berisi semua yang ada di Level 1 dan beberapa fitur baru. Level 2 dari spesifikasi grid membuat fitur subgrid dari CSS Grid. Pada baris berikut, kita akan melihat fitur subgrid seperti yang saat ini dirinci dalam Editor's Draft of Grid Level 2. Jadi, Anda dapat membuat grid saat menggunakan Opsi tata letak kisi, elemen kisi dapat diubah menjadi wadah kisi dengan mengatur tampilan: kisi di atasnya. Dalam contoh di bawah, saya memiliki item yang menyertakan 3 trek kolom kisi, adalah kisi wadah dengan 3 trek kolom, dan ini tidak sejalan dengan jejak induknya.

[xhtml]
<!DOCTYPE html>
<html>
<kepala>
<title>CSS Grid Level 2 – subgrid</title>
</head>
<gaya>
tubuh {
margin: 20 piksel;
}
.satu {
warna latar: hitam;
warna putih;
batas-radius: 20px;
bantalan: 20 piksel;
ukuran font: 120%;
}
.A .satu {
warna latar belakang: abu-abu muda;
}
.GRID {
tampilan: kisi;
celah kisi: 10px;
grid-templat-kolom: 3fr 1.5fr 2fr 1fr 1fr 2fr;
latar belakang-warna: putih;
warna hitam;
margin: 1.5em 0;
}
.SEBUAH {
bantalan: 0;
celah kisi: 15px;
grid-kolom: auto / span 4;
tampilan: kisi;
grid-templat-kolom: 3fr 1.5fr 1.5fr;
}
</ gaya>
<tubuh>
<div class="GRID">
<div class="one 1">1</div>
<div class="one 2">2</div>
<div class="one 3">3</div>
<div class="one 4">4</div>
<div class="one 5">5</div>
<div class="one 6">6</div>
<div class="one 7">7</div>
<div class="one 8">8</div>
<div class="satu A">
<div class="one 9">9</div>
<div class="one 10">10</div>
<div class="one 11">11</div>
<div class="one 12">12</div>
<div class="one 13">13</div>
<div class="one 14">14</div>
</div>
<div class="one 15">15</div>
<div class="one 16">16</div>
<div class="one 17">17</div>
<div class="one 18">18</div>
<div class="one 19">19</div>
<div class="one 20">20</div>
</div>
</tubuh>
</html>
[/xhtml]

Grid level 2 and subgrid

Menjadi proyek sumber terbuka, Anda dapat melihat di GitHub bagaimana pekerjaan berkembang di grup CSS. Pengembangan spesifikasi dan implementasi browser adalah proses melingkar. Jadi Anda dapat melihat bagaimana fitur subgrid ini berkembang dan implementasi browser yang muncul.

6. Gunakan CSS untuk Menguji Dukungan Browser

CSS telah mengembangkan cara untuk menguji dukungan browser untuk fitur baru. Pada dasarnya, ajukan pertanyaan untuk mengetahui apakah browser menerima fitur CSS tertentu. Cara ini membuat fitur baru digunakan dengan cara yang aman dan ringkas. Saat menggunakan fitur CSS baru, Anda perlu memeriksa apakah browser mendukung fitur itu. Pada baris ini, Anda disarankan untuk berkonsultasi dengan data di caniuse.com, di mana Anda dapat mengimpor data untuk lokasi Anda.

Use CSS to test browser support

@supports CSS memungkinkan Anda untuk menentukan deklarasi yang bergantung pada dukungan browser untuk fitur CSS, ini disebut kueri fitur. Aturan ini dapat ditulis di bagian atas kode atau mungkin bersarang di dalam aturan grup bersyarat lainnya.

[css]
@mendukung (tampilan: kisi) {
div {
tampilan: kisi;
}
}
[/css]

7. Peningkatan Sintaks Untuk Kueri Media – Level 4

Spesifikasi Media Query Level 4 berisi beberapa perbaikan sintaks untuk membuat media query menggunakan fitur yang memiliki tipe range seperti tinggi dan lebar.

Sebagai contoh, kami menggunakan fungsionalitas maksimal untuk lebar

[css]
@media (lebar maks: 20em)
[/css]

Kita dapat mencoba lebar antara dua nilai acak menggunakan min- dan max-

[css]
@media (lebar minimum: 20em) dan (lebar maksimum: 35em)
[/css]

Untuk pemahaman yang lebih baik, dalam contoh di atas kami ingin mengatakan bahwa lebarnya lebih besar dari atau sama dengan 20em dan lebih kecil atau sama dengan 35em

Kesimpulan

Pengembang situs web harus mengetahui teknik CSS baru dan menerapkannya dalam proyek mendatang. Mereka akan meningkatkan standar kerja mereka dan pelanggan akan senang dengan tampilan situs web yang ditingkatkan.