Sifat CSS dan API terkini untuk reka bentuk web pada tahun 2020-tutorial css-php.cn

Sifat CSS dan API terkini untuk reka bentuk web pada tahun 2020

WBOY

Lepaskan： 2023-09-08 14:53:01

ke hadapan

1096 orang telah melayarinya

Untuk membantu pembangun menyesuaikan tapak web mereka menggunakan gabungan JavaScript dan CSS, kami telah membangunkan sifat CSS baharu yang kini menyokong penyemak imbas popular. Sebahagian daripadanya disenaraikan di bawah -

fokus-dalam

Ia bertujuan untuk menyelesaikan kebolehcapaian fokus dalam elemen

tatal-snap

Ini membolehkan penatalan asli dan perlahan

@media(lebih suka-*)

Membantu menyesuaikan

UI dan UX halaman berdasarkan pilihan peranti pengguna, membolehkan tahap pemperibadian yang lebih tinggi

* Boleh mewakili kecerahan, warna daya, skema warna, kontras, mengurangkan gerakan dan mengurangkan ketelusan

Kedudukan: Melekit

Kepada. Simpan UI dalam port pandang.

Sifat logik dengan susun atur standard

membolehkan kami mempunyai jarak arah dinamik di dalam dan di sekeliling elemen.

gap property

Hartanah ini kini boleh didapati di Flexbox. Gap menetapkan bekas untuk mempunyai jarak, dan bukannya memberikan setiap elemen kanak-kanak jaraknya sendiri.

backfrop-filter

digunakan untuk menggayakan bahagian belakang elemen dengan mudah.

CSS Houdini API

API peringkat rendah yang membolehkan pembangun memberitahu penyemak imbas cara mereka mahu CSS tersuai dibaca dan difahami. Pembangun kini mempunyai akses yang lebih mudah untuk digunakan kepada model objek CSS. API Layout, Paint API, Parser API, Properties & Values API, AnimationWorklet, Typed OM dan Font Metrics API termasuk dalam skop ini.

Nisbah aspek

Kekalkan dimensi media

saiz

Tetapkan tinggi dan lebar dalam satu sifat

min(), max() dan pengapit()

Tetapkan kekangan di dalam mana-mana: di luar sifat CSS

Sintaks nilai berganda untuk elemen muat yang lebih baik

jenis gaya senarai

Tambah gaya tersuai pada senarai

modul CSS

Kami kini boleh meminta modul tertentu daripada fail setempat atau jauh menggunakan JavaScript

zon CSS

Padding kawasan dengan kandungan

subgrid CSS

membantu kami membuat reka letak mikro menggunakan reka letak mikro dalam grid CSS.

Contoh

Contoh berikut menunjukkan beberapa sifat ini -

Demonstrasi Langsung

<!DOCTYPE html>
<html>
<head>
<style>
* {
   margin: 2%;
   text-align: center;
}
:is(header, main, footer) span:after {
   content: " Awesome!";
   box-shadow: inset 0 0 8px lightgreen;
   font-size: 1.2em;
   font-family: Calibri;
}
:-webkit-any(header, div, section) span:after {
   content: " Awesome!";
   box-shadow: inset 0 0 8px lightgreen;
   font-size: 1.2em;
   font-family: Calibri;
}
:-moz-any(header, div, section) span:after {
   content: " Awesome!";
   box-shadow: inset 0 0 8px lightgreen;
   font-size: 1.2em;
   font-family: Calibri;
}
:matches(header, div, section) span:after {
   content: " Awesome!";
   box-shadow: inset 0 0 8px lightgreen;
   font-size: 1.2em;
   font-family: Calibri;
}
</style>
</head>
<body>
<header>
<span>:is() operator is</span>
</header>
<div>
<span>DEMO</span>
<span>Alt + F4</span>
<span>Enter</span>
</div>
<section>
<span>Howzit?</span>
</section>
</body>
</html>

Salin selepas log masuk

Output

Ini akan menghasilkan keputusan berikut -

2020 年网页设计最新 CSS 属性和 API

Atas ialah kandungan terperinci Sifat CSS dan API terkini untuk reka bentuk web pada tahun 2020. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!