4 egyszerű technikák a CSS-kód gyors hibakereséséhez és javításához szinte minden böngészőben

4 egyszerű technikák a CSS-kód gyors hibakereséséhez és javításához szinte minden böngészőben

tökéletes elrendezést tervezett új és közelgő webhelyéhez. De most az a gyönyörű Photoshop PSD réteges fájl konvertálása pixel tökéletes kóddá a kihívást jelentő rész. Ez nem kihívást jelent, mert nem tudja, hogyan kell kódolni, de nagyobb kihívást jelent, mert a különböző böngészők másképp renderelik a kódot, még akkor is, ha teljesen érvényes CSS-kódot használ a fantasztikus szemantikus HTML5 kód megjelenítéséhez. Ez még frusztrálóbb, ha egy hiba kijavítása egy böngészőben most új hibává válik egy másik böngészőben. Még akkor is, ha ez nem jelent kihívást, most képzelje el, hogy valaki más kódjának kijavítására van rendelve. Gyakran ez az utolsó eset az, ami arra készteti a haját, hogy számos WTF-et mondjon, mielőtt teljesen megértené, mi folyik a kódjukban, mert valószínűleg fejből ismeri az egész stíluslapját, és ez az új kód nem áll közel semmilyen kódolási egyezményhez. Azonban a CSS-kód hibakeresésének pillanata sokkal egyszerűbb és kevésbé frusztráló, mint korábban, ezeknek a nagyon egyszerű eszközöknek és technikáknak köszönhetően.

1) vizsgálja elem eszköz

vizsgálja elem messze a legjobb eszköz kezdeni hibakeresés semmit CSS. Ha webhelyeket fejleszt, akkor szüksége van a megfelelő webfejlesztő eszközökre. Szerencsére az Inspect Element mostantól natív módon integrálva van az összes modern webböngészővel a fejlesztői eszközök részeként. Ez az eszköz lehetővé teszi, hogy kiválassza az adott elemet az oldalon, amelyet javítani szeretne, és azonnal megnézheti, hogy milyen CSS-szabályokat alkalmaznak az adott elemre, amelyek miatt a kiválasztott elem így jelenik meg. Csak annyit kell tennie, hogy jobb egérgombbal kattintson a helyi menü “elem ellenőrzése” elemére.

most már teljes vizuális hozzáférést biztosít az elemhez kiszámított összes szabályhoz. Ha még nem választotta ki a megfelelő elemet, egyszerűen kattintson a forrásra, és jelölje meg a pontos elemet, amelyet diagnosztizálni szeretne. Amint a fenti képernyőképen látható, Most módosíthatja a CSS szabályait. Az egyes CSS-tulajdonságok bal oldalán található jelölőnégyzet segítségével átkapcsolhatja az adott tulajdonságot, vagy akár rákattinthat a tulajdonságra, megváltoztathatja annak értékét, vagy akár megnyomhatja az enter billentyűt, és új szabályokat adhat hozzá az elemhez. Még a legcsodálatosabb az, hogy milyen könnyen lehet hibakeresni egy elem lebegőállapotát, ha egyszerűen megnyitja a kiválasztott elem melletti legördülő menüt, és kiválasztja :lebegőállapot. Amint a jobb oldali panelen láthattad, ez a csodálatos eszköz még a stíluslap fájlját és az ezen az oldalon végrehajtott CSS-szabály sorszámát is megmutatja. Sőt, érthetőbb megérteni, hogy miért van az elemünknek 10 képpontos felső és alsó párnázása az 5 képpont helyett, mert a stílus 1026-os vonalának szabálya.CSS média lekérdezésünk CSS felülírja a régi szabályt ugyanazon fájl 916. sorában. Még a kiválasztott elem dobozmodelljét is meg lehet tekinteni az aktuális méreteivel, harmadik fél vonalzójának vagy mérőeszközének használata nélkül. Miután ezt a rengeteg információt most teszi a hibakeresés munkát sokkal könnyebb. Tegyük fel, hogy a stíluslap e-mail űrlapmezője nem hasonlít más bemeneti elemekhez, és kíváncsi, hogyan oldhatja meg ezt. Ellenőrizze az elemet, és megtudja, hogy mivel az új HTML5 beviteli mezőtípusokat használja, a téma tervezője nem tartalmaz semmilyen CSS-szabályt a input – re, ezért hozzáadja ezt a választót a stíluslaphoz.

input,input{ border: 1px solid #ccc;}

a Google Chrome hasonló fejlesztői eszközökkel is rendelkezik, amelyek ugyanazokat a funkciókat teszik lehetővé. Még a hibakeresési módot is megváltoztathatja egy olyan eszköz képernyőfelbontására, amelyet tesztelni szeretne, és megtudhatja, hogyan viselkedik a média lekérdezések CSS ilyen körülmények között.

ezek a fejlesztői eszközök a CSS fejlesztésén túl is nagyon hatékony képességekkel rendelkeznek, mint például a DOM-ellenőrzés, a JavaScript-profilozás, a JavaScript-konzol, az erőforrás-Felügyeleti eszközök és az egész más funkciók, amelyeknek saját oktatóanyagra van szükségük a cikken túl. Amint a fenti képen látható volt, a Chrome fejlesztői eszközökben akár különféle böngésző felhasználói ügynököket is lehet emulálni, vagy akár olyan érintési eseményeket is emulálni, mint például az ellop. Ezekkel az eszközökkel nem is kell aktívan hibakeresnie a CSS-t az okostelefon mobil böngészőjében, legalábbis bizonyos mértékig.

melyik böngésző fejlesztői eszközei a legjobbak, olyan kérdések, amelyeket kísérletezéssel fog megtudni. A nap végén minden attól függ, hogy mit próbál elérni, és ha ez az eszközkészlet lehetővé teszi, hogy elérje a végső célt. Én személy szerint ezeket az eszközöket az előnyömre használom. Mindegyikben van valami, ami tetszik, és hasznosnak találom, amikor hibakeresni akarom a kódomat. Például valahogy hasznosnak találom a hex színek kis négyzet alakú ábrázolását a CSS színtulajdonságok mellett, annak ellenére, hogy a fejemben feldolgozhatom az RGB színt, és hozzávetőleges színpad megjelenítést kaphatok, ezek a kis különbségek váltogatják ezeket a fejlesztői eszközöket.

Firebug

a Firebug volt az egyik első eszköz, amely az inspector funkciót biztosította. Ez az egyik legnépszerűbb webfejlesztő eszköz, közel 3 millió átlagos napi felhasználóval. Az írás óta a Firefox CSS hibakeresési eszközei elégségesek ahhoz, hogy ne használjam a Firebug-ot, azonban a Firefox JavaScript hibakereséséhez továbbra is a Firebug-ot használom.

félsz az IE7-től? Ne légy többé

lehet, hogy meglepett, de az Internet Explorer még vizsgálja elem (Ctrl + B) funkció A fejlesztői eszközök (F12). Bár nem olyan barátságos, mint más böngészők fejlesztői eszközei, ez az Internet Explorer 9-be épített funkció nagyon hasznos az elrendezések teszteléséhez IE7 és IE8 emulált módban. Azokban a napokban, amikor ezen fejlesztői eszközök egyike sem volt elérhető a régi IE böngészők hibakereséséhez, ez a második technika általában nagyon hasznos volt.

2) hibakeresés stílusban

olyan jó, mint az Inspect elem, néha vagy nincs hozzáférése az eszközhöz, például a mobil böngészőkhöz, vagy csak egy adott elem helyett néhány elem stílusát szeretné beállítani az oldalon. Szeretem tudni, hogy milyen elemek vannak a stílusomban, így tudom, hogy van-e túlcsordulás, lebegő problémák, vagy stb…. Ezért fényes és észrevehető háttérszínt adok az aktív elemhez, amit formázok, és a háttér színét kiveszem, miután a stílus megtörtént. Néha oda-vissza beállítom ezeket az elemeket, így csak áthelyezem a hibakeresési kódot a stíluslapom végére, kommentálom, és visszavonom, ha újra szükségem van rá. Így gyorsan átkapcsolhatom a hibakeresési módot, és megnézhetem, hogy az egyes elemek hogyan helyezkednek el a képernyőn.

ami azt eredményezi, hogy …

ebben a példában csak hozzáadtam a hibakeresési kódot az oldalam fő szerkezeti blokk elemeihez. Most meg tudom mondani, hogy hol kezdődik az egyes bejegyzések, és mennyi rés van az oldalsávon lévő minden bejegyzés vagy widget elem között, és ha hozzá akarok adni egy rést az oldalsáv és a fő tartalom között, vizuálisan élénk színekben látom.

ennek az ellenkezője is lehetséges, ha definiálunk egy sor hibakeresési szabályt, és hozzáadjuk ezt az osztályt bármilyen elemhez, amelyet látni akarunk. Például fent definiáltam egy új osztályt, a debug nevet a következő kóddal.

.debug{ border:1px solid red; }

és amikor bármilyen elemet Szeretnék hibakeresni, egyszerűen hozzáadom a debug osztályt az elemhez.

<div class="foo debug">Div element with foo and debug classes</div>

3) CSS hibakeresés JavaScript használatával

ez a technika nagyon hasonlít a fentiekhez, azonban néha furcsa okok miatt előfordul, hogy a fenti helyzet nem megvalósítható. Ez egy darab jQuery kód, amely a segítségünkre jut, ha a debug osztályt a foo elemre alkalmazzuk, vagy ebben az esetben akár CSS-t is hozzáadunk közvetlenül a bar elemhez.

$(document).ready(function(){ $('.foo').addClass('debug'); $('.bar').css('border' : '1px solid blue'); });

ez a helyzet nagyon ritkán fordulhat elő, de tudom, hogy ezt a technikát használtam a múltban, ezért jó tudni.

4) Ismerje meg a kaszkádot

néhány CSS-probléma annyira gyakori, mint az elszámolási úszók, hogy egyszer beleesik ebbe a csapdába, és legközelebb, amikor valami hasonlóval találkozik, tudja, mi okozta a problémát és hogyan lehet kijavítani. Általánosságban elmondható, hogy a CSS-problémák többsége könnyen megoldható, ha tudja, hogy a CSS-szabályok hogyan írják felül egymást. Például a specifikusabb kiválasztók felülírják az általánosabbakat, vagy az ID választó felülbírálja az osztályválasztót, vagy a !important deklaráció elsőbbséget élvez a normál deklarációval szemben. A kaszkád megismerése segít gyorsabban megoldani a lépcsőzetes stíluslapok kódját.

itt egy példa egyenesen a W3C spec hogyan választó specificitás működik.

néhány példa:

<HEAD><STYLE type="text/css"> #x97z { color: red }</STYLE></HEAD><BODY><P ID=x97z style="color: green"></BODY>

a fenti példában a P elem színe zöld lenne. A “stílus” attribútumban szereplő deklaráció felülírja a stílus elemben lévő deklarációt a 3.lépcsőzetes szabály miatt, mivel magasabb specifitással rendelkezik. Ha úgy gondolja, hogy ezt a példát nehéz megérteni, ellenőrizze ezt a cikket a CSS elsőbbségi sorrendjéről.

Záró megjegyzések

a pixel tökéletes eredmények elérése nehéz a különböző böngészők eltérő megjelenítései miatt. Néhány régi böngésző nem támogatja a teljes CSS3-at vagy a HTML5-et, ezért ellenőrizze Html5kérjük a közösségi projektet, hogy a használni kívánt szintaxist a böngészők többsége támogatja-e. Opcionálisan használhat tartalékokat vagy polifilleket a hiányzó funkciók biztosításához olyan böngészők számára, amelyek nem támogatják a teljes CSS3 vagy HTML5 implementációt.

Vélemény, hozzászólás?

Az e-mail-címet nem tesszük közzé.