Panduan Untuk DevTools CSS Baru Dan Eksperimental Di Firefox

Selama beberapa tahun terakhir, tim kami di Firefox telah mengerjakan alat CSS baru yang membahas teknik mutakhir dan frustrasi kuno. Kami adalah tim Alat Tata Letak, bagian dari Alat Pengembang Firefox, dan misi kami adalah meningkatkan alur kerja desain web modern.

Web telah mengalami evolusi yang luar biasa dalam dekade terakhir: fitur HTML/CSS baru, peningkatan browser, dan teknik desain. Tim kami mengabdikan diri untuk membangun alat yang cocok dengan inovasi itu sehingga desainer dan pengembang dapat memanfaatkan lebih banyak efisiensi dan kreativitas yang sekarang dimungkinkan.

Dalam panduan ini, kami akan membagikan ikhtisar tujuh alat baru kami, dengan cerita dari proses desain dan langkah-langkah praktis untuk mencoba setiap alat.

1. Inspektur Grid

Semuanya dimulai tiga tahun lalu ketika pakar tata letak CSS dan advokat pengembang kami, Jen Simmons, bekerja dengan anggota Firefox DevTools untuk membangun alat yang akan membantu pengguna dalam memeriksa tata letak Grid CSS.

Sebagai salah satu fitur baru yang paling kuat dari web modern, CSS Grid dengan cepat mendapatkan adopsi browser yang layak, tetapi masih memiliki adopsi situs web yang rendah. Ada kurva belajar yang curam, dan Anda masih memerlukan fallback untuk browser tertentu. Jadi, bagian dari tujuan kami adalah membantu mempopulerkan Grid dengan memberi pengembang cara yang lebih praktis untuk mempelajarinya.

Inti dari alat ini adalah kerangka kisi, dihamparkan pada halaman, yang membantu pengembang memvisualisasikan bagaimana kisi memposisikan elemen mereka, dan bagaimana tata letak berubah saat mereka mengubah gayanya. Kami menambahkan label bernomor untuk mengidentifikasi setiap garis grid, kemampuan untuk melihat hingga tiga grid sekaligus, dan kustomisasi warna untuk overlay. Baru-baru ini, kami juga menambahkan dukungan untuk subgrid, spesifikasi CSS baru yang diterapkan di Firefox dan semoga di lebih banyak browser segera.

Grid Inspector adalah inspirasi untuk semua alat yang mengikutinya. Itu bahkan menjadi inspirasi bagi tim baru: Alat Tata Letak! Dibentuk pada akhir tahun 2017, kami tersebar di empat zona waktu dan berkolaborasi dengan banyak orang lain di Mozilla, seperti pengembang mesin rendering kami dan orang-orang baik di MDN.

Cobalah Inspektur Grid

1. Di Firefox, kunjungi situs contoh Grid kami.
2. Buka Inspektur dengan Cmd + Shift + C .
3. Aktifkan overlay Grid melalui salah satu dari tiga cara:
• Panel Tata Letak :
  Di bagian Grid, centang kotak di sebelah .content.grid-content ;
• Tampilan Markup :
  Alihkan lencana “kisi” di sebelah <div class="content grid-content"> ;
• Tampilan Aturan :
  Klik tombol di sebelah display:grid; di dalam #page-intro .grid-content ;
4. Percobaan dengan Grid Inspector:
• Ubah warna hamparan ungu menjadi merah;
• Alihkan "Nomor baris" atau "Perpanjang baris tanpa batas";
• Nyalakan lebih banyak hamparan kisi;
• Lihat apa yang terjadi saat Anda menonaktifkan grid-gap: 15px di Aturan.

Sejak Grid, kami telah berusaha untuk memperluas kemungkinan alat CSS browser.

“

2. Editor Jalur Bentuk

Proyek berikutnya yang kami kerjakan adalah Shape Path Editor: alat pengeditan visual pertama kami.

CSS Shapes memungkinkan Anda untuk menentukan bentuk agar teks mengalir: lingkaran, segitiga, atau poligon banyak sisi. Ini dapat digunakan dengan properti clip-path yang memungkinkan Anda untuk memangkas elemen ke salah satu bentuk yang sama. Kedua teknik ini bersama-sama membuka kemungkinan untuk beberapa tata letak yang terinspirasi oleh desain grafis yang sangat unik.

Namun, membuat bentuk yang terkadang rumit ini bisa jadi sulit. Mengetik semua koordinat secara manual dan menggunakan unit CSS yang tepat rawan kesalahan dan jauh dari pola pikir kreatif yang diizinkan Shapes. Oleh karena itu, kami membuat alat yang memungkinkan Anda mengedit kode dengan langsung mengklik dan menyeret bentuk di halaman.

Jenis fitur ini—pengeditan visual—baru bagi kami dan alat peramban pada umumnya. Ini adalah contoh bagaimana kita bisa melampaui inspeksi dan debugging dan ke ranah desain.

Cobalah Editor Jalur Bentuk

1. Di Firefox, kunjungi halaman ini di situs web An Event Apart.
2. Buka Inspector dengan Cmd + Shift + C dan pilih gambar lingkaran pertama.
3. Di Aturan, klik pada ikon di sebelah properti shape-outside .
4. Pada halaman, klik pada titik-titik bentuk dan lihat apa yang terjadi saat Anda menyeret untuk membuat bentuk menjadi besar atau kecil. Ubah ke ukuran yang terlihat bagus untuk Anda.

Pengeditan visual adalah contoh bagaimana kita dapat melampaui inspeksi dan debugging dan ke ranah desain.

“

3. Editor Font

Selama bertahun-tahun, kami memiliki panel Font di Firefox yang menampilkan daftar informatif semua font yang digunakan di situs web. Dalam melanjutkan tema desain kami di browser, kami memutuskan untuk mengubahnya menjadi Editor Font untuk menyempurnakan properti font.

Kekuatan pendorong di balik proyek ini adalah tujuan kami untuk mendukung Variable Fonts pada saat yang sama ketika tim mesin rendering Firefox menambahkan dukungan untuk itu. Variable Fonts memberi desainer font cara untuk menawarkan variasi halus di sepanjang sumbu, seperti bobot, dalam satu file font. Ini juga mendukung sumbu khusus, yang memberi pembuat font dan desainer web fleksibilitas yang luar biasa. Alat kami secara otomatis mendeteksi sumbu khusus ini dan memberi Anda cara untuk menyesuaikan dan memvisualisasikannya. Jika tidak, ini akan membutuhkan situs web khusus seperti Axis-Praxis.

Selain itu, kami menambahkan fitur yang menyediakan kemampuan untuk mengarahkan kursor ke nama font untuk menyorot di mana font tertentu digunakan pada halaman. Ini berguna karena cara browser memilih font yang digunakan untuk merender sepotong teks bisa rumit dan bergantung pada komputer seseorang. Beberapa karakter mungkin tiba-tiba ditukar dengan font yang berbeda karena subsetting font.

Cobalah Editor Font

1. Di Firefox, kunjungi situs demo font variabel ini.
2. Buka Inspektur dengan Cmd + Shift + C dan pilih kata "variabel" di judul (pemilih elemennya adalah .title__variable-web__variable ).
3. Di panel ketiga Inspektur, navigasikan ke panel Font:
• Arahkan kursor ke nama font Output Sans Regular untuk melihat apa yang disorot;
• Cobalah penggeser berat dan miring ;
• Lihatlah variasi font prasetel di menu tarik-turun Instances .

4. Inspektur Flexbox

Alat Grid, Shapes, dan Variable Fonts kami dapat bersama-sama mendukung beberapa desain grafis yang sangat canggih di web, tetapi mereka masih agak mutakhir berdasarkan dukungan browser. (Mereka hampir sampai, tetapi masih membutuhkan fallback.) Kami tidak ingin bekerja hanya pada fitur baru—kami tertarik pada masalah yang dihadapi sebagian besar pengembang web setiap hari.

Jadi kami mulai mengerjakan Flexbox Inspector. Dari segi desain, ini adalah proyek kami yang paling ambisius, dan ini menumbuhkan beberapa strategi penelitian pengguna baru untuk tim kami.

Seperti Grid, CSS Flexbox memiliki kurva belajar yang cukup curam saat Anda pertama kali memulai. Butuh waktu untuk benar-benar memahaminya, dan banyak dari kita yang mencoba-coba untuk mencapai tata letak yang kita inginkan. Pada awal proyek, tim kami bahkan tidak yakin apakah kami memahami Flexbox sendiri, dan kami tidak tahu apa tantangan utamanya. Jadi kami meningkatkan pemahaman kami, dan kami menjalankan survei untuk menemukan apa yang paling dibutuhkan orang ketika datang ke Flexbox.

Hasilnya memiliki pengaruh besar pada rencana kami, membuat kasus untuk visualisasi rumit seperti tumbuh/menyusut dan min/maks. Kami terus bekerja dengan komunitas di seluruh proyek dengan memasukkan umpan balik ke dalam prototipe visual yang berkembang dan build Nightly.

Alat ini mencakup dua bagian utama: stabilo yang bekerja seperti Grid Inspector, dan alat Flexbox mendetail di dalam Inspector. Inti dari alat ini adalah diagram item fleksibel dengan info ukuran.

Dengan bantuan dari insinyur tata letak Gecko, kami dapat menunjukkan keputusan ukuran langkah demi langkah dari mesin rendering untuk memberi pengguna gambaran lengkap tentang mengapa dan bagaimana item fleksibel berakhir dengan ukuran tertentu.

Catatan : Pelajari kisah lengkap proses desain kami di “Mendesain Flexbox Inspector”.

Cobalah Inspektur Flexbox

1. Di Firefox, kunjungi Bugzilla Mozilla.
2. Buka Inspektur dengan Cmd + Shift + C dan pilih elemen div.inner (tepat di dalam bilah header).
3. Nyalakan hamparan Flexbox melalui salah satu dari tiga cara:
• Panel Tata Letak :
  Di bagian Wadah Fleksibel, nyalakan sakelar;
• Tampilan Markup :
  Alihkan lencana “flex” di sebelah <div class="inner"> ;
• Tampilan Aturan :
  Klik tombol di sebelah display:flex .
4. Gunakan panel Flex Container untuk menavigasi ke Item Flex yang disebut nav#header-nav .
• Perhatikan ukuran yang ditunjukkan pada diagram dan tabel ukuran;
• Tambah dan kurangi lebar browser Anda dan lihat bagaimana diagram berubah.

Interlude: Menggandakan Riset

Sebagai tim kecil tanpa dukungan penelitian pengguna formal, kami sering menggunakan desain-oleh-dogfooding: mendasarkan pendapat kami pada pengalaman kami sendiri dalam menggunakan alat. Namun setelah sukses dengan survei Flexbox, kami tahu bahwa kami ingin lebih baik dalam mengumpulkan data untuk memandu kami. Kami menjalankan survei baru untuk membantu menginformasikan langkah kami selanjutnya.

Kami mengumpulkan daftar 20 tantangan terbesar yang dihadapi oleh pengembang web dan meminta komunitas kami untuk memberi peringkat mereka menggunakan format max-diff.

Ketika kami menemukan bahwa pemenang terbesar dari tantangan ini adalah Debugging Tata Letak CSS, kami menjalankan survei lanjutan tentang bug CSS tertentu untuk menemukan titik kesulitan terbesar. Kami melengkapi survei ini dengan wawancara pengguna dan pengujian pengguna.

Kami juga meminta orang-orang untuk menentukan peringkat frustrasi mereka dengan alat pengembang browser. Masalah teratas yang jelas adalah memindahkan perubahan CSS kembali ke editor. Ini menjadi proyek kami berikutnya.

5. Ubah Panel

Kesulitan dalam mentransfer pekerjaan seseorang dari alat pengembang browser ke editor adalah salah satu masalah kuno yang kita semua baru saja terbiasa. Kami sangat bersemangat untuk membuat solusi yang sederhana dan segera dapat digunakan.

Edge dan Chrome DevTools keluar dengan varian alat ini terlebih dahulu. Kami berfokus untuk membantu berbagai alur kerja CSS: Luncurkan DevTools, ubah gaya apa pun yang Anda inginkan, lalu ekspor perubahan Anda dengan menyalin set lengkap perubahan (untuk kolaborasi) atau hanya satu aturan yang diubah (untuk menempelkan ke kode).

Ini meningkatkan kekokohan seluruh alur kerja, termasuk alat tata letak kami yang lain. Dan ini baru permulaan: Kami tahu penyegaran dan navigasi yang tidak disengaja dari halaman adalah sumber besar hilangnya data, jadi cara untuk menghadirkan kegigihan pada alat ini akan menjadi langkah penting berikutnya.

Cobalah Panel Perubahan

1. Di Firefox, navigasikan ke situs web mana pun.
2. Buka Inspektur dengan Cmd + Shift + C dan pilih elemen.
3. Buat beberapa perubahan pada CSS:
• Ubah gaya di panel Aturan;
• Sesuaikan font di panel Font.
4. Di panel kanan Inspektur, navigasikan ke tab Perubahan dan lakukan hal berikut:
• Klik Salin Semua Perubahan , lalu tempel di editor teks untuk melihat hasilnya;
• Arahkan kursor ke nama pemilih dan klik Salin Aturan , lalu tempel untuk melihat hasilnya.

6. CSS tidak aktif

Fitur CSS Tidak Aktif kami memecahkan salah satu masalah teratas dari survei debug tata letak kami pada bug CSS tertentu:

“Mengapa properti CSS ini tidak melakukan apa-apa?”

Dari segi desain, fitur ini sangat sederhana—mengabu-abukan CSS yang tidak memengaruhi halaman, dan menunjukkan tooltip untuk menjelaskan mengapa properti tidak berpengaruh. Tapi kami tahu ini dapat meningkatkan efisiensi dan mengurangi frustrasi. Kami didukung oleh penelitian dari Sarah Lim dan rekan-rekannya yang membuat alat serupa. Dalam studi mereka, mereka menemukan bahwa pengembang pemula 50% lebih cepat dalam membangun dengan CSS ketika mereka menggunakan alat yang memungkinkan mereka mengabaikan kode yang tidak relevan.

Di satu sisi, ini adalah jenis fitur favorit kami: Buah UX rendah yang hampir tidak terdaftar sebagai fitur, tetapi meningkatkan seluruh alur kerja tanpa benar-benar perlu ditemukan atau dipelajari.

CSS tidak aktif diluncurkan di Firefox 70 tetapi sekarang dapat digunakan di Firefox versi pra-rilis, termasuk Edisi Pengembang, Beta, dan Nightly.

Coba CSS Tidak Aktif

1. Unduh Edisi Pengembang Firefox;
2. Buka Firefox dan navigasikan ke wikipedia.org;
3. Buka Inspector dengan Cmd + Shift + C dan pilih area konten tengah, yang disebut central-featured ;
4. Perhatikan deklarasi perataan vertical-align berwarna abu-abu;
5. Arahkan kursor ke ikon info, dan klik "Pelajari lebih lanjut" jika Anda tertarik.

7. Panel Aksesibilitas

Sepanjang jalan kami memiliki fitur aksesibilitas yang dikembangkan oleh tim terpisah yang sebagian besar terdiri dari satu orang — Yura Zenevich, tahun ini dengan magangnya Maliha Islam.

Bersama-sama mereka telah mengubah panel Aksesibilitas baru di Firefox menjadi alat inspeksi dan audit yang kuat. Selain menampilkan pohon aksesibilitas dan properti, kini Anda dapat menjalankan berbagai jenis pemeriksaan pada halaman. Sejauh ini pemeriksaan termasuk kontras warna, label teks, dan gaya fokus keyboard.

Sekarang di Nightly, Anda dapat mencoba simulator buta warna baru yang memanfaatkan teknologi WebRender kami yang akan datang.

Cobalah Panel Aksesibilitas

1. Unduh Edisi Pengembang Firefox;
2. Arahkan ke meetup.com;
3. Di alat pengembang, navigasikan ke tab Aksesibilitas, dan klik tombol "Aktifkan Fitur Aksesibilitas";
4. Klik menu tarik-turun di sebelah “Periksa masalah” dan pilih “Semua Masalah”;
5. Lihat berbagai masalah kontras, keyboard, dan label teks, dan klik tautan "Pelajari lebih lanjut" jika Anda tertarik.

Selanjutnya

Saat ini kami sedang bekerja keras pada alat kompatibilitas browser yang menggunakan informasi dari MDN untuk menunjukkan masalah khusus browser untuk elemen yang dipilih. Anda dapat mengikuti di GitHub untuk mempelajari lebih lanjut.

Masa depan

Kami berkomitmen untuk mendukung web modern, dan itu berarti terus berubah dan berkembang.

Spesifikasi baru diimplementasikan oleh vendor browser setiap saat. Panduan dan praktik terbaik seputar peningkatan progresif, responsivitas, dan aksesibilitas terus berkembang. Kami pembuat alat juga harus terus berkembang.

Dan bagaimana dengan masalah jangka panjang yang selalu ada dalam pembuatan web? Antarmuka pengguna sehari-hari apa yang perlu dipikirkan kembali? Ini adalah beberapa pertanyaan yang membuat kami terus maju!

Bagaimana dengan cara yang lebih baik untuk menavigasi pohon DOM halaman? Bagian DevTools itu pada dasarnya tidak berubah sejak masa Firebug.

Kami telah bereksperimen dengan fitur seperti tombol mundur dan maju yang akan memudahkan navigasi antara elemen yang baru saja dikunjungi.

Perubahan yang lebih dramatis yang sedang kita diskusikan adalah menambahkan tampilan DOM ringkas yang menggunakan sintaks yang mirip dengan mesin templating HTML. Fokusnya adalah pada kasus penggunaan yang paling umum—menavigasi ke CSS—daripada melihat/mengedit sumbernya.

Kami juga telah memikirkan pemilih elemen yang lebih baik. Kami tahu bagaimana bekerja di dalam halaman bisa lebih produktif, dengan lebih sedikit melompat-lompat ke DevTools. Kita bisa membuat pemilih elemen lebih kuat dan lebih gigih. Mungkin itu bisa memilih spasi pada halaman dan memberi tahu Anda apa yang menyebabkan ruang itu, atau bisa menjelaskan hubungan antara elemen yang berbeda.

Ini hanyalah dua dari banyak ide yang kami harap dapat dieksplorasi lebih jauh dengan bantuan komunitas.

Kami Membutuhkan Masukan Anda!

Kami ingin terus membuat alat luar biasa yang membuat hidup Anda lebih mudah sebagai pengembang atau desainer.

Berikut cara mudah untuk membantu: Unduh Firefox Developer Edition dan coba gunakan untuk beberapa pekerjaan Anda minggu depan.

Kemudian, beri tahu kami pendapat Anda dengan mengikuti survei 1 halaman kami.

Kami selalu tertarik untuk mendengar ide-ide untuk perbaikan, terutama buah-buahan yang menggantung rendah yang bisa menyelamatkan kita semua dari frustrasi biasa. Kami melakukan pekerjaan kami di tempat terbuka, sehingga Anda dapat mengikuti dan bergabung. Kami akan terus mengabari Anda di @FirefoxDevTools.

Terima kasih kepada Patrick Brosset atas kontribusinya pada artikel ini.