Naučite ovo jedno čudno? Trik za otklanjanje pogrešaka u CSS-u

Dizajneri ga MRZE! ?

Naučite ovo jedno čudno? Trik za otklanjanje pogrešaka u CSS-u

* Nije mamac za klik *

Prije nego što dođem do članka, samo želim podijeliti da gradim proizvod i volio bih prikupiti neke podatke o tome kako bolje služiti web programerima. Napravio sam kratki upitnik koji sam trebao provjeriti prije ili nakon čitanja ovog članka. Molimo provjerite - hvala! A sada, vratimo se našem redovnom planiranom programiranju.

Bok! ? Ja sam Zaydek! Kad sam prvi put krenuo naučiti izrađivati ​​web stranice, bilo je mnogo bolnije nego što se očekivalo. Uostalom, ja sam iskusan grafički dizajner i programer - kako bi web stranice biti t šešir teško?

U ovom članku detaljno opisujem odluke koje su me dovele do izrade CSS otklanjanja pogrešaka.

Također sam predavao besplatni HTML / CSS tečaj na Scrimbi, gdje podučavam kako izraditi prekrasan blog od * nule *. Kliknite ovdje za prijavu! ?

Scrimba.com interaktivna je front-end platforma na kojoj se web stranice bilježe kao događaji - a ne kao video - i mogu se uređivati! ?

Što je program za ispravljanje pogrešaka?

Postoji sjajan citat Donalda Knutha o otklanjanju pogrešaka. Da parafraziram, to ide otprilike ovako.

Netko: "Koji je najbolji programski jezik?" Donald Knuth: "Koji ima najbolji program za otklanjanje pogrešaka?"

Tu sam ideju cijenio tek do CSS-a. Programski jezici imaju tu razumnost kad logika premašuje mišljenje. Ali CSS je drugačiji jer se CSS "osjeća" samopouzdan.

Pa što možemo učiniti? Pa, možemo poslušati dobar savjet Donalda Knutha i upotrijebiti program za ispravljanje pogrešaka!

Tamo gdje je programski jezik alat, alat za ispravljanje pogrešaka koristi se za razumijevanje našeg alata - našeg koda. Nisu svi kompjuteri poput otklanjanja pogrešaka, i ja to razumijem.

Ne tjerajte računalo da radi ono što ne razumijemo. Mislim da u tome ima zasluga, ali ono o čemu ovdje govorim je otkrivanje strukture tamo gdje je ona inače bila nevidljiva.

Poduzmite sljedeće:

Što možemo učiniti da vidimo strukturu naše web stranice? Evo dva rješenja kojih sam svjestan: možemo stvoriti jednokratna CSS pravila kako bi naglasili neki element ili se možemo poslužiti Chromeovim, Firefoxovim ili Safari-jevim alatima za otklanjanje pogrešaka. Ali to je još uvijek više-manje jednokratno rješenje. Ono što nam treba je opće rješenje.

Naš program za ispravljanje pogrešaka

Nedavno sam dizajnirao ovo zaglavlje i nije bilo jednostavno. Namjera mu je bila lebdjeti sliku preko teksta u više redaka. Trebalo bi biti jednostavno, zar ne?

Pa CSS je antagonist? ovdje. Ono što bi u Photoshopu inače bilo jednostavno, može biti herojsko putovanje u CSS-u, a to me dovelo do eksperimentiranja s outline:

* { outline: solid 0.25rem hsla(210, 100%, 100%, 0.5); }

Ništa previše posebno - samo nježno-bijele linije. Ono što mi nemamo, međutim, pravilo koje vrijedi za sve elemente dok smo koristiti *, a ne ime id, classili element.

Ipak, uvođenje knjige * { … }za mene je bilo duboko. Pomislio sam, "Gdje to ne bih želio?" Tako sam dodao još nekoliko redaka i razvio formalniji program za ispravljanje pogrešaka:

* { color: hsla(210, 100%, 100%, 0.9) !important; background: hsla(210, 100%, 50%, 0.5) !important; outline: solid 0.25rem hsla(210, 100%, 100%, 0.5) !important;}

Puno poboljšano! Ovdje smo stvorili shematski osjećaj za našu web stranicu. Bio sam oprezan da ne koristite čvrste boje, ali umjesto toga izabrao soft-boje ili boje s alfa kanal, tako da ugniježđena elementi pojavljuju se tamnije boje, sa plavije blues i bjelji bijelaca. Dodao sam i !importantzbog zloglasnih CSS Ratova specifičnosti.

Ono što se ponekad može osjećati kao CSS zajebavanje kod nas je kako i kada se primjenjuje kaskada. Odnosno, "Kako to da se stilovi ponekad primjenjuju, a ponekad ne?"

Ovo nije Schrodingerov CSS, to je jednostavna matematika. CSS koristi jednostavni kalkulator kako bi utvrdio koja su pravila preciznija, a rezultat određuje primjenjuje li se CSS.

Majka svih specifičnosti je !important, koja nadjačava sva inline, ID-ove, klase i pravila elemenata. To je poput Zvijezde smrti u usporedbi s Carstvom. Unatoč činjenici da se upotreba !importantopćenito obeshrabruje, savršena je za otklanjanje pogrešaka - jer web mjesto nećemo isporučiti s uključenim. Umjesto toga, program za ispravljanje pogrešaka koristimo samo u dizajnu i razvoju naše web stranice.

Što sam više koristio program za ispravljanje pogrešaka, to sam više shvaćao da *:not(path):noth(g)se preferira korištenje kao selektor. Na ovaj način ne bih dobio strane crte iz vektorske grafike. Također sam primijetio da je onemogućavanje box-shadowčišće, jer program za ispravljanje pogrešaka ne treba osjećaj dubine.

Dakle, evo posljednjeg programa za otklanjanje pogrešaka:

*:not(path):not(g) { color: hsla(210, 100%, 100%, 0.9) !important; background: hsla(210, 100%, 50%, 0.5) !important; outline: solid 0.25rem hsla(210, 100%, 100%, 0.5) !important;
 box-shadow: none !important;}

Mislim da mi ljudi mrzimo ono što ne razumijemo. I CSS nije iznimka. Pogrešno je karakterizirano jer je neshvaćeno. Predlažem: zamislite CSS kao mač s dvije oštrice. Može se koristiti za izradu i dekonstrukciju web stranica . Da, CSS nije Photoshop, ali to ne znači da ne može raditi stvari koje Photoshop ne može. Stvaranje vlastite debugger je jedna stvar koju možete učiniti.

Kako koristiti ovaj program za ispravljanje pogrešaka?

  1. Idite na zaydek.github.io/debug.css
  2. Označi “Debug CSS” (izvorni kod ovdje)
  3. Kliknite oznaku da biste je * uključili * i * isključili *?

Ne zaboravite na besplatni HTML / CSS tečaj o Scrimbi, gdje podučavam kako napraviti prekrasan blog od * nule *. Kliknite ovdje za prijavu! ?