Satu Pemboleh Ubah CSS, Lima Pusingan Semakan, dan Rantaian Alat Swift Yang Menipu

"Jadikan overlay lut sinar" ialah jenis tugas yang kedengaran seperti satu peluncur dan satu sifat CSS opacity. GeekBye v2.0.7 menghantar tepat hasil yang dilihat pengguna itu — satu "mod cerah" boleh laras yang membolehkan anda melihat menembusi panel pembantu ke atas apa sahaja yang berada di belakangnya. Tetapi bahagian menarik keluaran ini bukan cirinya. Ia adalah lima pusingan semakan yang diperlukan untuk membetulkannya, dan sebuah kisah perang tentang binari terkompil yang bertukar saiz kerana dokumentasi kami sendiri menipu seorang penyemak.

Cara yang betul untuk menjadikan keseluruhan UI lut sinar

Versi naif bagi ini ialah menaburkan nilai opacity merentasi setiap komponen panel dan menganggapnya selesai. Itu perangkap penyelenggaraan: belasan nilai yang dikodkan keras yang terpesong sebaik sahaja sesiapa menyentuh salah satunya.

Sebaliknya, v2.0.7 menggunakan satu utiliti CSS berkongsi dan satu token per-permukaan. Terdapat satu kelas overlay-surface yang mengira latar belakang panel daripada dua custom property: opacity asas yang setiap permukaan isytiharkan untuk dirinya sendiri (bar kawalan, sembang, gelembung transkrip, blok kod, dan sebagainya masing-masing memilih sendiri), dan pendarab alpha global yang menumpang pada akar overlay dan mewakili tetapan peluncur pengguna. Setiap permukaan membaca pendarab yang sama; setiap satu mengekalkan wataknya sendiri. Yang paling penting, hanya latar belakang panel yang berskala — teks, ikon, dan backdrop-blur kekal dipaparkan sepenuhnya, jadi "lut sinar" tidak pernah bermakna "tidak boleh dibaca."

Dua keputusan dalam reka bentuk itu wajar disebut kerana ia adalah perbezaan antara ciri yang membantu dan yang menjana tiket sokongan:

• Nilai lalai adalah legap sepenuhnya. Tetapan opacity dihantar pada 100% — tiada kesan. Tiada overlay sesiapa tiba-tiba menjadi tembus pandang apabila dikemas kini; lut sinar itu ada apabila anda mahu menggunakannya dan tidak kelihatan sehingga ketika itu.
• Tetapan itu disahkan secara defensif. Terdapat satu sumber kebenaran untuk min, maks, lalai, dan langkah, serta satu penormal yang mengawal kes kosong/hilang. Itu penting kerana satu jerat kaki JavaScript: Number(null) ialah 0, jadi tetapan yang hilang yang dipaksa secara naif akan menjadikan overlay ke keadaan paling lut sinar dan bukannya lalainya. Penormal menangkap itu sebelum ia boleh berlaku.

Seret peluncur dan keseluruhan overlay mewarnai semula secara langsung, di tengah-tengah rakaman, kerana setiap permukaan melanggan tetapan yang sama. Tiada mula semula, tiada muat semula.

Apa yang ditangkap semakan (dan tidak akan pernah ditangkap ujian satu monitor)

Di sinilah "satu pemboleh ubah CSS" berhenti menjadi mudah. Tiga pepijat muncul dalam semakan, dan dua daripadanya adalah pengajaran yang sama memakai topeng berbeza.

Panel yang enggan pudar. Overlay pintasan papan kekunci kekal kukuh degil manakala segala-galanya menjadi lut sinar. Puncanya: ia dipaparkan di luar subpokok DOM yang membawa pemboleh ubah opacity, jadi ia tidak pernah mewarisi nilai yang mengalir turun dari akar overlay. Custom property CSS diwarisi melalui pokok DOM — dan jika sesuatu nod bukan sebenarnya keturunan tempat anda menetapkan pemboleh ubah, ia senyap-senyap tidak mendapat apa-apa. Penyelesaiannya ialah menetapkan pemboleh ubah itu secara setempat pada panel itu juga.

Warna hover yang lenyap. Butang Fn/Assist kehilangan sinar hover sian mereka. Utiliti lut sinar menetapkan latar belakang dengan !important (ia perlu menang menentang lalai permukaan), dan itu menghempap warna latar belakang hover: pada elemen yang sama. Perlanggaran kekhususan. Penyelesaiannya ialah menjadikan warna hover sama tegasnya supaya ia boleh menang semula semasa hover.

Kedua-duanya adalah kebenaran mendasar yang sama: kaskade pemboleh ubah CSS ialah sempadan ketepatan sebenar, bukan butiran penggayaan. Pewarisan dan kekhususan menentukan sama ada nilai anda malah sampai ke elemen, dan kedua-duanya tidak muncul dalam tangkapan skrin sehinggalah ia salah.

Opacity sama, rupa berbeza. Yang paling halus: bar rakaman dan bar melahu ditetapkan kepada opacity asas yang sama, namun masih kelihatan berbeza ketara. Kenapa? Pil rakaman menggunakan backdrop-blur yang lebih berat, dan blur yang kuat di atas latar belakang gelap purata menjadi hasil yang lebih gelap — jadi alpha yang sama menghasilkan rupa yang tidak sama. Ia juga mempunyai sempadan samar sedangkan bar melahu mempunyai tepi cincin kecerunan yang cerah. Penyelesaiannya menyepadankan aras blur dan cincin itu. Pengajarannya melekat: alpha yang sama bukan rupa yang sama sebaik sahaja blur masuk ke dalam gambar. Lut sinar ialah satu sistem kesan yang berinteraksi, bukan satu nombor tunggal.

Binari yang bertukar saiz kerana dokumentasi menipu

Sekarang kisah perang, dan ia jenis kegemaran saya — yang mana alat dan dokumentasi tidak bersetuju dan seorang penyemak yang berhati-hati terperangkap dalam tembak-menembak.

GeekBye menghantar beberapa binari Swift pra-terkompil (pembantu asli untuk perkara seperti pengesanan mesyuarat). Kerana binari terkompil di-commit ke dalam repo, setiap pembangun mesti mengkompilnya dengan versi Swift yang sama tepat — rantaian alat yang berbeza menghasilkan bait yang berbeza daripada sumber yang serupa, dan itu bermakna konflik git hantu setiap kali seseorang membina semula. Jadi terdapat satu skrip yang menguatkuasakan satu versi khusus: Swift 6.3.x, disemak pada masa binaan.

Semasa semakan keluaran ini, seorang penyemak menandakan bahawa sesuatu binari patut dibina semula untuk sepadan dengan "rantaian alat yang dimandatkan repo." Pembangun melakukan tepat itu — dan saiz binari berubah daripada 89,184 bait kepada 88,512. Mesej commit malah menyatakan ia "memulihkan output stabil bait" dengan membina semula menggunakan Swift 6.2.1, "rantaian alat yang dimandatkan repo."

Kecuali 6.2.1 ialah versi yang salah. Skrip penguatkuasaan binaan memerlukan 6.3.x. Masalahnya ialah dokumentasi prosa — README dan panduan penyumbang — masih menyatakan 6.2.1 di beberapa tempat. Jadi seorang penyemak yang teliti dan seorang pembangun yang teliti, kedua-duanya cuba melakukan perkara yang betul, mengikut dokumentasi terus ke dalam meng-commit tepat artifak yang skrip penguatkuasaan wujud untuk menolaknya. Binari 6.2.1 dalam repo 6.3.x ialah tepat pesongan yang akan merosakkan binaan semula bersih setiap pembangun lain.

Commit seterusnya membetulkannya — dan pembetulan itulah intinya. Ia bukan sekadar membina semula binari kembali ke bentuk 6.3.x-nya (saiz dipulihkan kepada 89,184, terus kembali ke tempat ia bermula). Ia juga membetulkan rujukan "6.2.1" yang lapuk dalam dokumentasi supaya perangkap itu tidak boleh dipasang semula. Binari berubah-ubah 672 bait dan kembali merentasi dua commit, dan pepijat sebenar tidak pernah binari itu. Ia adalah bahawa dua sumber kebenaran — skrip penguatkuasaan dan dokumentasi bertulis — tidak bersetuju, dan seorang manusia mempercayai yang salah.

Tiga perkara yang diajar oleh keluaran ini

1. Kaskade pemboleh ubah CSS ialah sempadan ketepatan. Dua daripada tiga pepijat semakan berpunca daripada pemboleh ubah yang tidak diwarisi dan satu !important yang menghempap keadaan hover. Jika sesuatu nilai perlu sampai ke elemen melalui pewarisan atau menang melalui kekhususan, laluan itu adalah logik — sahkan ia seperti logik, bukan seperti penggayaan.
2. Parameter yang sama boleh menghasilkan keputusan yang tidak sama. Bar rakaman dan bar melahu berkongsi opacity dan masih kelihatan berbeza kerana blur yang berbeza mengubah hasilnya. Apabila anda menyatukan sistem visual pada satu nombor, semak bahawa pemboleh ubah lain di sekeliling setiap permukaan tidak senyap-senyap mengubah maksud nombor itu.
3. Apabila dokumentasi dan penguatkuasaan tidak bersetuju, betulkan percanggahan itu — bukan sekadar gejalanya. Pepijat itu bukan binari yang buruk; ia adalah dokumentasi yang menamakan rantaian alat yang salah dan skrip penguatkuasaan yang menyatakan sebaliknya. Membina semula binari merawat gejala. Menjadikan setiap sumber kebenaran bersetuju ialah pembetulan sebenar, kerana penyemak seterusnya akan mempercayai dokumentasi itu juga.

GeekBye v2.0.7 menghantar lut sinar seragam, semua kes tepi disemak dan dokumentasi rantaian alat diluruskan. Ia adalah yang terakhir daripada keluaran "kraf senyap" sebelum sprint kebolehpercayaan yang menyusul. Untuk asas di bawahnya, lihat apa yang sebenarnya diperlukan oleh versi 2 (v2.0.0); untuk keluaran gilap seiring, perisian yang tenang: pembaikan kelipan dan cip mod jawapan (v2.0.3 + v2.0.5); dan untuk bagaimana overlay kekal tersembunyi semasa panggilan, cara kekal halimunan semasa perkongsian skrin.