Referensi fitur CSS

Kayce Basques

Jecelyn Yeen

Sofia Emelianova

Temukan alur kerja baru dalam referensi komprehensif fitur Chrome DevTools yang terkait dengan melihat dan mengubah CSS.

Lihat Melihat dan mengubah CSS untuk mempelajari dasar-dasarnya.

Pilih elemen

Panel Elemen di DevTools memungkinkan Anda melihat atau mengubah CSS dari satu elemen pada satu waktu.

Pada screenshot, elemen h1 yang ditandai dengan warna biru di Pohon DOM adalah elemen yang dipilih. Di sebelah kanan, gaya elemen ditampilkan di tab Gaya. Di sebelah kiri, elemen disorot di area pandang, tetapi hanya karena mouse diarahkan ke atasnya di DOM Tree.

Lihat Melihat CSS elemen untuk melihat tutorial.

Ada banyak cara untuk memilih elemen:

• Di area pandang, klik kanan elemen, lalu pilih Periksa.
• Di DevTools, klik Select an element atau tekan Command+Shift+C (Mac) atau Control+Shift+C (Windows, Linux), lalu klik elemen di area pandang.
• Di DevTools, klik elemen di DOM Tree.
• Di DevTools, jalankan kueri seperti document.querySelector('p') di Console, klik kanan hasilnya, lalu pilih Reveal in Elements panel.

Lihat CSS

Gunakan tab Elemen > Gaya dan Dihitung untuk melihat aturan CSS dan mendiagnosis masalah CSS.

Menavigasi dengan link

Tab Gaya menampilkan link di berbagai tempat ke berbagai tempat lain, termasuk, tetapi tidak terbatas pada:

• Di samping aturan CSS, ke lembar gaya dan sumber CSS. Link tersebut membuka panel Sumber. Jika lembar gaya diperkecil, lihat Membuat file yang diminifikasi dapat dibaca.
• Di bagian Diwariskan dari ..., ke elemen induk.
• Dalam panggilan var(), ke deklarasi properti kustom.
• Di properti singkat animation, ke @keyframes.
• Link Pelajari lebih lanjut di tooltip dokumentasi.
• dan lainnya.

Berikut ini beberapa di antaranya yang disoroti:

Gaya link dapat berbeda. Jika Anda tidak yakin apakah sesuatu itu adalah tautan, coba klik untuk mencari tahu.

Lihat tooltip dengan dokumentasi, kekhususan, dan nilai properti khusus

Elemen > Gaya menampilkan tooltip berisi informasi yang berguna saat Anda mengarahkan kursor ke elemen tertentu.

Lihat dokumentasi CSS

Untuk melihat tooltip dengan deskripsi CSS singkat, arahkan kursor ke nama properti di tab Gaya.

Catatan: DevTools mengambil deskripsi untuk tooltip dari Data Kustom VS Code.

Klik Pelajari lebih lanjut untuk membuka Referensi CSS MDN di properti ini.

Untuk menonaktifkan tooltip, centang Jangan tampilkan.

Untuk mengaktifkannya kembali, periksa Setelan > Preferensi > Elemen > Tampilkan tooltip dokumentasi CSS.

Lihat kekhususan pemilih

Arahkan kursor ke pemilih untuk melihat tooltip dengan bobot kekhususannya.

Melihat nilai properti kustom

Arahkan kursor ke --custom-property untuk melihat nilainya dalam tooltip.

Melihat CSS yang tidak valid, diganti, tidak aktif, dan CSS lainnya

Tab Gaya mengenali berbagai jenis masalah CSS dan menyorotinya dengan cara yang berbeda.

Lihat Memahami CSS di tab Gaya.

Hanya melihat CSS yang benar-benar diterapkan ke elemen

Tab Styles menampilkan semua aturan yang berlaku untuk suatu elemen, termasuk deklarasi yang telah diganti. Jika Anda tidak tertarik dengan deklarasi yang diganti, gunakan tab Computed untuk hanya melihat CSS yang benar-benar diterapkan ke elemen.

1. Pilih elemen.
2. Buka tab Computed di panel Elemen.

Centang kotak Tampilkan Semua untuk melihat semua properti.

Lihat Memahami CSS di tab Komputasi.

Lihat properti CSS dalam urutan abjad

Gunakan tab Computed. Lihat Hanya melihat CSS yang benar-benar diterapkan ke elemen.

Lihat properti CSS yang diwarisi

Centang kotak Tampilkan Semua di tab Dihitung. Lihat Hanya melihat CSS yang benar-benar diterapkan ke elemen.

Atau, scroll tab Styles dan temukan bagian bernama Inherited from <element_name>.

Lihat aturan CSS

At-rules adalah pernyataan CSS yang memungkinkan Anda mengontrol perilaku CSS. Elemen > Gaya menampilkan aturan berikut di bagian khusus:

• @property
• @supports
• @scope
• @font-palette-values

Lihat @property di aturan

@property CSS at-rule memungkinkan Anda menentukan properti kustom CSS secara eksplisit dan mendaftarkannya dalam style sheet tanpa menjalankan JavaScript apa pun.

Arahkan kursor ke nama properti tersebut di tab Gaya, untuk melihat tooltip yang berisi nilai properti, deskripsi, dan link ke pendaftarannya di bagian @property yang dapat diciutkan di bagian bawah tab Gaya.

Untuk mengedit aturan @property, klik dua kali nama atau nilainya.

Lihat @supports di aturan

Tab Gaya menampilkan CSS @supports di aturan jika diterapkan ke elemen. Misalnya, periksa elemen berikut:

Jika browser Anda mendukung fungsi lab(), elemen akan berwarna hijau, atau berwarna ungu.

Catatan: Pada saat penulisan, hanya Safari yang mendukung ruang warna CIELAB.

Lihat @scope di aturan

Tab Gaya menunjukkan pada aturan @scope CSS jika diterapkan ke elemen.

@scope at-rules baru adalah bagian dari spesifikasi CSS Cascading dan Inheritance Level 6. Aturan ini memungkinkan Anda untuk menentukan cakupan gaya CSS, dengan kata lain, secara eksplisit menerapkan gaya ke elemen tertentu.

Catatan: Fitur at-rule @scope bersifat eksperimental. Untuk mengujinya, aktifkan tanda Experimental Web Platform features di chrome://flags/#enable-experimental-web-platform-features. Jika tidak, pratinjau berikutnya tidak akan berfungsi.

Lihat aturan @scope dalam pratinjau berikut:

1. Periksa teks pada kartu di pratinjau.
2. Di tab Styles, temukan aturan @scope.

Dalam contoh ini, aturan @scope menggantikan deklarasi background-color CSS global untuk semua elemen <p> di dalam elemen dengan class card.

Untuk mengedit aturan @scope, klik dua kali aturan tersebut.

Lihat @font-palette-values di aturan

@font-palette-values CSS at-rule memungkinkan Anda menyesuaikan nilai default properti font-palette. Elemen > Gaya menunjukkan aturan ini di bagian khusus.

Lihat bagian @font-palette-values dalam pratinjau berikutnya:

1. Periksa baris teks kedua dalam pratinjau.
2. Di Gaya, cari bagian @font-palette-values.

Dalam contoh ini, nilai palet font --New menggantikan nilai default dari font berwarna.

Untuk mengedit nilai kustom, klik dua kali nilai tersebut.

Melihat model kotak elemen

Untuk melihat model kotak elemen, buka tab Styles lalu klik tombol Tampilkan sidebar di panel tindakan.

Untuk mengubah nilai, klik dua kali nilai tersebut.

Menelusuri dan memfilter CSS elemen

Gunakan kotak Filter pada tab Styles dan Computed untuk menelusuri properti atau nilai CSS tertentu.

Untuk menelusuri juga properti yang diwarisi di tab Computed, centang kotak Tampilkan Semua.

Untuk membuka tab Computed, kelompokkan properti yang difilter dalam kategori yang dapat diciutkan dengan mencentang Group.

Emulasikan halaman terfokus

Jika Anda mengalihkan fokus dari halaman ke DevTools, beberapa elemen overlay akan otomatis disembunyikan jika dipicu oleh fokus. Misalnya, menu drop-down, menu, atau pemilih tanggal. Opsi check_box Emulasikan halaman terfokus memungkinkan Anda men-debug elemen tersebut seolah-olah sedang menjadi fokus.

Perhatian: Dengan mengaktifkan opsi ini, document.visibilityState disetel ke visible dan peristiwa visibilitychange tidak diaktifkan. Untuk informasi selengkapnya, lihat Page Visibility API.

Coba emulasikan halaman yang difokuskan pada halaman demo ini:

1. Fokuskan elemen input. Elemen lain muncul di bawahnya.
2. Buka DevTools. Jendela DevTools sekarang menjadi fokus, bukan halaman, sehingga elemen menghilang lagi.
3. Di Elemen > Gaya, klik :hov, centang check_box Emulasikan halaman yang difokuskan, dan pastikan elemen input dipilih. Sekarang Anda dapat memeriksa elemen di bawahnya.

Anda juga dapat menemukan opsi yang sama di panel Rendering.

Mengaktifkan/menonaktifkan class pseudo

Untuk mengganti class pseudo, seperti :active, :focus, :focus-within, :target, :hover, :visited, atau focus-visible:

1. Pilih elemen.
2. Pada panel Elemen, buka tab Gaya.
3. Klik :hov.
4. Centang class pseudo yang ingin diaktifkan.

Di area pandang, Anda dapat melihat bahwa DevTools menerapkan deklarasi background-color ke elemen, meskipun elemen tersebut sebenarnya tidak diarahkan.

Lihat Menambahkan pseudostate ke class untuk tutorial interaktif.

Lihat elemen pseudo sorotan yang diwariskan

Elemen Pseudo memungkinkan Anda menata gaya bagian elemen tertentu. Elemen semu sorotan adalah bagian dokumen dengan status "dipilih" dan diberi gaya sebagai "disorot" untuk menunjukkan status ini kepada pengguna. Misalnya, elemen pseudo tersebut adalah ::selection, ::spelling-error, ::grammar-error, dan ::highlight.

Seperti yang disebutkan dalam spesifikasi, jika beberapa gaya bertentangan, proses cascade akan menentukan gaya yang unggul.

Catatan: Untuk mengaktifkan fitur ini, jalankan Chrome dengan flag --enable-blink-features=HighlightInheritance.

Untuk lebih memahami pewarisan dan prioritas aturan, Anda dapat melihat sorotan elemen pseudo yang diwariskan:

1. Periksa teks di bawah.

   Saya mewarisi gaya elemen pseudo sorotan milik orang tua saya. Pilih saya!

2. Pilih sebagian dari teks di atas.

3. Di tab Styles, scroll ke bawah untuk menemukan bagian Inherited from ::selection pseudo of....

Lihat lapisan bertingkat

Lapisan bertingkat memungkinkan kontrol yang lebih eksplisit atas file CSS untuk mencegah konflik kekhususan gaya. Hal ini berguna untuk codebase besar, sistem desain, dan saat mengelola gaya pihak ketiga dalam aplikasi.

Untuk melihat lapisan cascade, inspect elemen berikutnya lalu buka Elements > Styles.

Di tab Styles, lihat 3 lapisan bertingkat dan gayanya: page, component, dan base.

Untuk melihat urutan lapisan, klik nama lapisan atau tombol Aktifkan/nonaktifkan tampilan lapisan CSS.

Lapisan page memiliki kekhususan tertinggi, sehingga latar belakang elemen berwarna hijau.

Melihat halaman dalam mode cetak

Untuk melihat halaman dalam mode cetak:

1. Buka Command Menu.
2. Mulai mengetik Rendering, lalu pilih Show Rendering.
3. Untuk drop-down Emulate CSS Media, pilih print.

Lihat CSS yang digunakan dan tidak digunakan dengan tab Cakupan

Tab Cakupan menunjukkan kepada Anda CSS apa yang sebenarnya digunakan halaman.

1. Tekan Command+Shift+P (Mac) atau Control+Shift+P (Windows, Linux, ChromeOS) selagi DevTools fokus untuk membuka Menu Command.

2. Mulai mengetik coverage.

   

3. Pilih Tampilkan Cakupan. Tab Cakupan akan muncul.

   

4. Klik Muat ulang. Halaman dimuat ulang dan tab Cakupan memberikan ringkasan tentang jumlah CSS (dan JavaScript) yang digunakan dari setiap file yang dimuat browser.

   

   Hijau mewakili CSS yang digunakan. Merah menunjukkan CSS yang tidak digunakan.

5. Klik file CSS untuk melihat rincian baris demi baris tentang CSS yang digunakannya dalam pratinjau di atas.

   

   Pada screenshot, baris 55 hingga 57 dan 65 hingga 67 dari devsite-google-blue.css tidak digunakan, sedangkan baris 59 hingga 63 digunakan.

Terapkan otomatis mode pratinjau cetak

Lihat Memaksa DevTools Masuk ke Mode Pratinjau Cetak.

Salin CSS

Dari satu menu drop-down di tab Gaya, Anda dapat menyalin aturan CSS, deklarasi, properti, nilai terpisah

Selain itu, Anda dapat menyalin properti CSS dalam sintaksis JavaScript. Opsi ini berguna jika Anda menggunakan library CSS-in-JS.

Untuk menyalin CSS:

1. Pilih elemen.
2. Di tab Elemen > Gaya, klik kanan properti CSS.

3. Pilih salah satu opsi berikut dari menu drop-down:

   • Salin deklarasi. Menyalin properti dan nilainya dalam sintaksis CSS: css property: value;
   • Salin properti. Hanya menyalin nama property.
   • Salin nilai. Hanya menyalin value.
   • Salin aturan. Menyalin seluruh aturan CSS: css selector[, selector] { property: value; property: value; ... }
   • Salin deklarasi sebagai JS. Menyalin properti dan nilainya dalam sintaksis JavaScript: js propertyInCamelCase: 'value'
   • Salin semua pernyataan. Menyalin semua properti dan nilainya dalam aturan CSS: css property: value; property: value; ...

   • Salin semua deklarasi sebagai JS. Menyalin semua properti dan nilainya dalam sintaksis JavaScript: ```js propertyInCamelCase: 'value', propertyInCamelCase: 'value', ...

   • Salin semua perubahan CSS. Menyalin perubahan yang Anda buat di tab Gaya di semua deklarasi.

   • Lihat nilai yang dihitung. Membawa Anda ke tab Computed.

Ubah CSS

Bagian ini mencantumkan semua cara untuk mengubah CSS di Elemen > Gaya.

Selain itu, Anda dapat:

• Ganti CSS di seluruh pemuatan halaman.
• Simpan CSS yang dimodifikasi ke sumber lokal Anda di ruang kerja.

Menambahkan deklarasi CSS ke elemen

Karena urutan deklarasi memengaruhi cara penataan gaya elemen, Anda dapat menambahkan deklarasi dengan cara yang berbeda:

• Tambahkan deklarasi inline. Setara dengan menambahkan atribut style ke HTML elemen.
• Tambahkan deklarasi ke aturan gaya.

Alur kerja apa yang harus Anda gunakan? Untuk sebagian besar skenario, sebaiknya gunakan alur kerja deklarasi inline. Deklarasi inline memiliki kekhususan lebih tinggi daripada eksternal, sehingga alur kerja inline memastikan perubahan berlaku dalam elemen seperti yang Anda harapkan. Lihat Jenis Pemilih untuk mengetahui informasi selengkapnya tentang kekhususan.

Jika Anda men-debug gaya elemen dan perlu secara khusus menguji apa yang terjadi saat deklarasi ditentukan di tempat yang berbeda, gunakan alur kerja lainnya.

Menambahkan deklarasi inline

Untuk menambahkan deklarasi inline:

1. Pilih elemen.
2. Di tab Styles, klik di antara tanda kurung pada bagian element.style. Kursor akan berfokus, memungkinkan Anda memasukkan teks.
3. Masukkan nama properti, lalu tekan Enter.

4. Masukkan nilai yang valid untuk properti tersebut, lalu tekan Enter. Dalam DOM Tree, Anda dapat melihat bahwa atribut style telah ditambahkan ke elemen.

   

   Pada screenshot, properti margin-top dan background-color telah diterapkan ke elemen yang dipilih. Dalam DOM Tree, Anda dapat melihat deklarasi yang tercermin dalam atribut style elemen.

Menambahkan deklarasi ke aturan gaya

Untuk menambahkan deklarasi ke aturan gaya yang ada:

1. Pilih elemen.
2. Di tab Styles, klik di antara tanda kurung aturan gaya tempat Anda ingin menambahkan deklarasi. Kursor akan berfokus, memungkinkan Anda memasukkan teks.
3. Masukkan nama properti, lalu tekan Enter.
4. Masukkan nilai yang valid untuk properti tersebut, lalu tekan Enter.

Pada screenshot, aturan gaya mendapatkan deklarasi border-bottom-style:groove baru.

Mengubah nama atau nilai deklarasi

Klik dua kali nama atau nilai deklarasi untuk mengubahnya. Lihat Mengubah nilai yang dapat dihitung dengan pintasan keyboard guna mengetahui pintasan untuk menambahkan atau mengurangi nilai dengan cepat sebanyak 0,1, 1, 10, atau 100 unit.

Mengubah nilai yang dapat dihitung dengan pintasan keyboard

Saat mengedit nilai deklarasi yang dapat dihitung, misalnya font-size, Anda dapat menggunakan pintasan keyboard berikut untuk menambahkan nilai dengan jumlah tetap:

• Option+Up (Mac) atau Alt+Up (Windows, Linux) untuk bertambah 0,1.
• Naik untuk mengubah nilai sebesar 1, atau sebesar 0,1 jika nilai saat ini antara -1 dan 1.
• Shift+Up untuk menambahkan angka 10.
• Shift+Command+Up (Mac) atau Control+Shift+Page Up (Windows, Linux) untuk menambah nilai sebesar 100.

Pengurangan juga bisa dilakukan. Cukup ganti setiap instance Up yang disebutkan sebelumnya dengan Down.

Mengubah nilai panjang

Tidak digunakan lagi: Fitur ini tidak digunakan lagi di Chrome 123. Untuk mengaktifkannya kembali untuk sementara, hapus setelan Setelan > Eksperimen > kotak centang Hentikan penggunaan alat pembuat <length> CSS di tab Gaya. Jangan ragu untuk memberikan masukan di crbug/1522657.

Anda dapat menggunakan pointer untuk mengubah properti apa pun yang memiliki panjang, seperti lebar, tinggi, padding, margin, atau batas.

Untuk mengubah satuan panjang:

1. Arahkan kursor ke nama unit dan perhatikan bahwa unit tersebut digarisbawahi.

2. Klik nama unit untuk memilih unit dari menu drop-down.

Untuk mengubah nilai panjang:

1. Arahkan kursor ke nilai unit dan perhatikan bahwa kursor Anda berubah menjadi panah berkepala dua horizontal.

2. Tarik secara horizontal untuk menambah atau mengurangi nilai.

Untuk menyesuaikan nilai dengan 10, tahan tombol Shift saat menarik.

Menambahkan class ke elemen

Untuk menambahkan kelas ke elemen:

1. Pilih elemen di Pohon DOM.
2. Klik .cls.
3. Masukkan nama kelas di kotak Tambahkan Kelas Baru.
4. Tekan Enter.

Emulasikan preferensi tema terang dan gelap serta aktifkan mode gelap otomatis

Untuk beralih mode gelap otomatis atau mengemulasi preferensi pengguna tema terang atau gelap:

1. Pada tab Elemen > Gaya, klik Aktifkan/nonaktifkan emulasi rendering umum.

2. Pilih salah satu opsi berikut dari menu drop-down:

   • prefers-color-skema: terang. Menunjukkan bahwa pengguna lebih memilih tema terang.
   • prefers-color-skema: gelap. Menunjukkan bahwa pengguna lebih menyukai tema gelap.
   • Mode gelap otomatis. Menampilkan halaman dalam mode gelap meskipun Anda tidak menerapkannya. Selain itu, menyetel prefers-color-scheme ke dark secara otomatis.

Drop-down ini adalah pintasan untuk opsi Emulasikan fitur media CSS prefers-color-scheme dan Aktifkan mode gelap otomatis dari tab Rendering.

Beralih kelas

Untuk mengaktifkan atau menonaktifkan kelas pada elemen:

1. Pilih elemen di Pohon DOM.
2. Buka bagian Class Elemen. Lihat Menambahkan class ke elemen. Di bawah kotak Add New Class adalah semua class yang diterapkan ke elemen ini.
3. Centang kotak di samping kelas yang ingin diaktifkan atau dinonaktifkan.

Menambahkan aturan gaya

Untuk menambahkan aturan gaya baru:

1. Pilih elemen.
2. Klik Aturan Gaya Baru . DevTools menyisipkan aturan baru di bawah aturan element.style.

Pada screenshot, DevTools menambahkan aturan gaya h1.devsite-page-title setelah mengklik New Style Rule.

Memilih lembar gaya mana yang akan ditambahi aturan

Saat menambahkan aturan gaya baru, klik lama Aturan Gaya Baru untuk memilih lembar gaya yang akan ditambahi aturan gaya.

Mengaktifkan/menonaktifkan deklarasi

Untuk mengaktifkan atau menonaktifkan satu deklarasi:

1. Pilih elemen.
2. Pada tab Gaya, arahkan kursor ke aturan yang menentukan deklarasi. Kotak centang akan muncul di sebelah setiap deklarasi.
3. Centang atau hapus centang pada kotak di samping pernyataan. Saat Anda menghapus deklarasi, DevTools akan mencoretnya untuk menunjukkan bahwa deklarasi tidak aktif lagi.

Pada screenshot, properti color untuk elemen yang saat ini dipilih dinonaktifkan.

Mengedit elemen pseudo ::view-transition selama animasi

Lihat bagian yang terkait dalam Animasi.

Untuk mengetahui informasi selengkapnya, lihat Transisi yang lancar dan sederhana dengan View Transitions API.

Sejajarkan item petak dan kontennya dengan Editor Petak

Lihat bagian yang sesuai dalam petak Periksa CSS.

Mengubah warna dengan Pemilih Warna

Lihat Memeriksa dan men-debug warna HD dan non-HD dengan Pemilih Warna.

Mengubah nilai sudut dengan Angle Clock

Angle Clock menyediakan GUI untuk mengubah <angle> dalam nilai properti CSS.

Untuk membuka Angle Clock:

1. Pilih elemen dengan deklarasi sudut.

2. Di tab Gaya, temukan deklarasi transform atau background yang ingin diubah. Klik kotak Angle Preview di samping nilai sudut.

   

   Jam kecil di sebelah kiri -5deg dan 0.25turn adalah pratinjau sudut.

3. Klik pratinjau untuk membuka Angle Clock.

   

4. Ubah nilai sudut dengan mengklik lingkaran Angle Clock atau scroll mouse untuk meningkatkan / mengurangi nilai sudut sebesar 1.

5. Ada lebih banyak pintasan keyboard untuk mengubah nilai sudut. Cari tahu selengkapnya di pintasan keyboard panel Styles.

Ubah kotak dan bayangan teks dengan Shadow Editor

Editor Bayangan menyediakan GUI untuk mengubah deklarasi CSS text-shadow dan box-shadow.

Untuk mengubah bayangan dengan Shadow Editor:

1. Pilih elemen dengan deklarasi bayangan. Misalnya, pilih elemen berikutnya.

2. Di tab Styles, temukan ikon bayangan di samping deklarasi text-shadow atau box-shadow.

   

3. Klik ikon bayangan untuk membuka Editor bayangan.

   

4. Mengubah properti bayangan:

   • Jenis (hanya untuk box-shadow). Pilih Outset atau Inset.
   • Offset X dan Y. Tarik titik biru atau tentukan nilai.
   • Blur. Tarik penggeser atau tentukan nilai.
   • Spread (hanya untuk box-shadow). Tarik penggeser atau tentukan nilai.

5. Amati perubahan yang diterapkan pada elemen.

Mengedit pengaturan waktu animasi dan transisi dengan Easing Editor

Easing Editor menyediakan GUI untuk mengubah nilai transition-timing-function dan animation-timing-function.

Untuk membuka Easing Editor:

1. Pilih elemen dengan deklarasi fungsi pengaturan waktu, seperti elemen <body> di halaman ini.
2. Di tab Styles, temukan ikon ungu di samping transition-timing-function, deklarasi animation-timing-function, atau properti singkatan transition.
3. Klik ikon untuk membuka Easing Editor:

Menggunakan preset untuk menyesuaikan pengaturan waktu

Untuk menyesuaikan pengaturan waktu dengan sekali klik, gunakan preset di Easing Editor:

1. Di Easing Editor, untuk menetapkan nilai kata kunci, klik salah satu tombol pemilih:
   • linear
   • ease-in-out
   • kemudahan
   • {i>ease-out<i}

2. Di pengalih Presets, klik tombol atau untuk memilih salah satu preset berikut:

   • Preset linear: elastic, bounce, atau emphasized.
   • Preset Bezier Kubik:

Kata kunci waktu	Standar	Bezier Kubik
keluar-masuk perlahan	Masuk Keluar, Sinus	cubic-bezier(0.45, 0.05, 0.55, 0.95)
	Masuk Keluar, Kuadrat	cubic-bezier(0.46, 0.03, 0.52, 0.96)
	Keluar, Kubik	cubic-bezier(0.65, 0.05, 0.36, 1)
	Cepat Keluar, Melambat	cubic-bezier(0.4, 0, 0.2, 1)
	Masuk, Belakang	cubic-bezier(0.68, -0.55, 0.27, 1.55)
masuk perlahan	Di, Sinus	cubic-bezier(0.47, 0, 0.75, 0.72)
	In, Kuadrat	cubic-bezier(0.55, 0.09, 0.68, 0.53)
	Dalam, Kubik	cubic-bezier(0.55, 0.06, 0.68, 0.19)
	Masuk, Kembali	cubic-bezier(0.6, -0.28, 0.74, 0.05)
	Cepat Keluar, Linear Masuk	cubic-bezier(0.4, 0, 1, 1)
keluar perlahan	Keluar, Sinus	cubic-bezier(0.39, 0.58, 0.57, 1)
	Keluar, Kuadrat	cubic-bezier(0.25, 0.46, 0.45, 0.94)
	Keluar, Kubik	cubic-bezier(0.22, 0.61, 0.36, 1)
	Keluar Linear, Melambat	cubic-bezier(0, 0, 0.2, 1)
	Keluar, Kembali	cubic-bezier(0.18, 0.89, 0.32, 1.28)

Mengonfigurasi pengaturan waktu kustom

Untuk menetapkan nilai kustom bagi fungsi pengaturan waktu, gunakan titik kontrol pada garis:

• Untuk fungsi linier, klik di mana saja pada garis untuk menambahkan titik kontrol dan seret. Klik dua kali untuk menghapus titik.

  

• Untuk fungsi Cubic Bezier, seret salah satu titik kontrol.

  

Setiap perubahan akan memicu animasi bola di Pratinjau di bagian atas editor.

(Eksperimental) Salin perubahan CSS

Catatan: Untuk mengaktifkan fitur eksperimental ini, centang Sync CSS changes in the Styles tab di bagian Settings > Experiments, lalu muat ulang DevTools.

Dengan mengaktifkan eksperimen ini, tab Gaya akan menandai perubahan CSS Anda dengan warna hijau.

Untuk menyalin satu perubahan deklarasi CSS, arahkan kursor ke deklarasi yang ditandai lalu klik tombol Copy.

Untuk menyalin semua perubahan CSS di seluruh deklarasi sekaligus, klik kanan pada deklarasi apa pun, lalu pilih Copy all CSS changes.

Selain itu, Anda dapat melacak perubahan yang Anda buat dengan tab Perubahan.