Megtanulja ezt a furcsát? Trükk a CSS hibakereséséhez

A tervezők utálják! ?

Megtanulja ezt a furcsát? Trükk a CSS hibakereséséhez

* Nem kattintható csali *

Mielőtt eljutnék a cikkhez, csak azt szeretném megosztani, hogy egy terméket építek, és szívesen gyűjtenék néhány adatot arról, hogyan lehetne jobban kiszolgálni a webfejlesztőket. Készítettem egy rövid kérdőívet a cikk elolvasása előtt vagy után. Kérjük, nézze meg - köszönöm! És most térjünk vissza a rendszeres ütemezett programozáshoz.

Szia! ? Zaydek vagyok! Amikor először nekiálltam megtanulni weboldalakat készíteni, ez sokkal fájdalmasabb volt, mint vártuk. Elvégre én vagyok egy tapasztalt grafikus és programozó - hogyan lehetne weboldalak lehet t kalap nehéz?

Ebben a cikkben részletesen bemutatom azokat a döntéseket, amelyek miatt CSS-hibakeresőt készítettem.

Tanítottam egy ingyenes HTML / CSS tanfolyamot is a Scrimbán, ahol megtanítom, hogyan építsünk egy gyönyörű blogot a semmiből *. Kattintson ide a regisztrációhoz! ?

A Scrimba.com egy interaktív front-end platform, ahol a webhelyeket eseményként rögzítik - nem videókként - és szerkeszthetőek! ?

Mi a hibakereső?

Remek Donald Knuth idézet található a hibakeresésről. Átfogalmazva, valami ilyesmi megy.

Valaki: „Mi a legjobb programozási nyelv?” Donald Knuth: „Melyiknek van a legjobb hibakeresője?”

A CSS-ig nem értékeltem ezt az ötletet. A programozási nyelvek rendelkeznek ezzel az ésszerűséggel, ahol a logika meghaladja a véleményt. De a CSS más, mert a CSS véleményesnek érzi magát.

Tehát mit tehetünk? Nos, meghallgathatjuk Donald Knuth jó tanácsait, és használhatunk hibakeresőt!

Ahol a programozási nyelv eszköz, a hibakereső olyan eszközöket használ, amelyekkel megismerhetjük eszközünket - kódunkat. Nem minden comp-sci nép kedveli a hibakeresőket, és ezt megértem.

Ne arra késztesse a számítógépet, amit nem értünk. Szerintem ebben van érdem, de amiről itt beszélek, az egy leleplező szerkezet, ahol egyébként láthatatlan volt.

Tegye a következőket:

Mit tehetünk azért, hogy megtekinthessük weboldalunk felépítését? Itt van két megoldás, amivel tisztában vagyok: egyszeri CSS szabályokat hozhatunk létre egy elem hangsúlyozására, vagy használhatjuk a Chrome, a Firefox vagy a Safari Debugger Tools eszközeit. De ez még mindig többé-kevésbé egyszeri megoldás. Amire szükségünk van, az egy általános megoldás.

Hibakeresőnk

Nem sokkal ezelőtt terveztem ezt a fejlécet, és nem volt egyszerű. A cél az volt, hogy egy képet a többsoros szöveg fölé vigyen. Egyszerűnek kellene lennie, igaz?

Nos, a CSS az antagonista? itt. Ami egyébként egyszerű lenne a Photoshopban, az egy hős útja lehet a CSS-ben, és ez arra késztetett, hogy kísérletezzek az o-valutline:

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

Semmi különös - csak puha-fehér vonalak. Amit azonban megvan az a szabály, amely az összes elemet, amíg mi használ *, és nem a neve a id, classvagy element.

Mégis * { … }mély volt számomra a bevezetése . Azt gondoltam: "Hol ne akarnám ezt?" Szóval adtam hozzá még néhány sort, és kifejlesztettem egy hivatalosabb hibakeresőt:

* { 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;}

Sokkal jobb! Itt készítettünk egy sematikus hangulatot a weboldalunkhoz. Vigyáztam, hogy ne használjak egyszínűeket, ehelyett lágy színeket vagy alfa csatornás színeket választottam, hogy a beágyazott elemek színe mélyebb legyen, kékesebb és fehérebb fehérekkel. Hozzátettem !importanta hírhedt CSS Specificity Wars miatt is.

A CSS néha azt érezheti velünk, hogy miként és mikor alkalmazza a kaszkádot. Vagyis: "Hogyan lehet, hogy a stílusokat néha alkalmazzák, és néha nem?"

Ez nem Schrodinger CSS-je, hanem egyszerű matematika. A CSS egy egyszerű számológéppel határozza meg, hogy mely szabályok vannak konkrétabbak, és az eredmény határozza meg, hogy alkalmazzák-e a CSS-t vagy sem.

Minden sajátosság anyja !important, amely felülír minden soros, azonosítót, osztályt és elemszabályt. Olyan, mint a Halálcsillag a Birodalomhoz képest. Annak ellenére, hogy a (z) használata !importantáltalában nem ajánlott, tökéletes egy hibakereső számára - mert a webhelyünket nem „bekapcsolt állapotban” szállítjuk. Ehelyett a hibakeresőt csak a weboldalunk tervezésénél és fejlesztésénél használjuk.

Minél többet használtam a hibakeresőt, annál inkább rájöttem, hogy *:not(path):noth(g)a választóként való használat előnyben részesített. Így nem kapnék idegen vonalakat a vektorgrafikából. Azt is észrevettem, hogy a letiltás box-shadowtisztább, mivel a hibakeresőnek nincs szüksége mélységérzetre.

Tehát itt van az utolsó hibakereső:

*: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;}

Azt hiszem, mi emberek utáljuk azt, amit nem értünk. És ez alól a CSS sem kivétel. Félre van írva, mert félreértik. Javaslom: gondoljon a CSS-re, mint kétélű kardra. Webhelyek összeállításához és dekonstrukciójához egyaránt használható . Igen, a CSS nem Photoshop, de ez nem jelenti azt, hogy nem tud olyan dolgokat végrehajtani, amelyeket a Photoshop nem. Létre a saját debugger van egy dolog, amit lehet csinálni.

Hogyan kell használni ezt a hibakeresőt?

  1. Nyissa meg a zaydek.github.io/debug.css oldalt
  2. Könyvjelző „Debug CSS” (forráskód itt)
  3. A könyvjelzőre kattintva kapcsolhatja be * és * ki *?

Ne felejtsd el az ingyenes HTML / CSS tanfolyamot a Scrimbán, ahol megtanítom, hogyan készítsünk egy gyönyörű blogot a semmiből *. Kattintson ide a regisztrációhoz! ?