4 simple techniques to quickly debug and fix your CSS code in almost any browser

4 simple techniques to quickly debug and fix your CSS code in almost any browser

you have designed the perfect layout for your new and coming website. Mutta nyt muuntaa kaikki kaunis Photoshop PSD layered tiedosto pikselin täydellinen koodi on haastava osa. Se ei ole haastavaa, koska et osaa koodata, mutta haastavampaa, koska eri selaimet tehdä koodin eri tavalla, vaikka käytät täysin voimassa CSS-koodi näyttää, että mahtava semanttinen HTML5 koodi olet kirjoittanut. Tämä on vielä turhauttavampaa, kun virheen korjaamisesta yhdessä selaimessa tulee nyt uusi vika toisessa selaimessa. Vaikka se ei ole haastavaa, kuvittele, että sinut on määrätty korjaamaan jonkun toisen koodia, joka on kaikkialla. Usein tämä viimeinen tapaus on se, joka saa sinut vetämään hiuksiasi ja sanomaan lukuisia WTFs ennen kuin täysin ymmärrät, mitä heidän koodissaan tapahtuu, koska luultavasti tiedät koko tyylisivusi ulkoa ja tämä uusi koodi ei ole missä tahansa lähellä mitään koodaussopimusta. Kuitenkin, hetki saada alas ja likainen kanssa virheenkorjaus että CSS-koodi on paljon yksinkertaisempi ja vähemmän turhauttavaa kuin ennen, kiitos näiden hyvin yksinkertaisia työkaluja ja tekniikoita.

1) Tarkasta Elementtityökalu

tarkasta Elementti ylivoimaisesti on paras työkalu aloittaa virheenkorjaus mitään CSS. Jos kehität verkkosivustoja, tarvitset oikeat web – kehitystyökalut. Ja onneksi tarkastaa elementti on nyt integroitu natiivisti kaikki modernit selaimet osana niiden Kehittäjä työkaluja. Tämän työkalun avulla voit valita tietyn elementin sivulla, jonka haluat korjata ja heti nähdä, mitä CSS sääntöjä sovelletaan että elementti, joka aiheuttaa valitun elementin näyttää tällä tavalla. Kaikki mitä sinun tarvitsee tehdä, on vain klikkaa hiiren oikealla painikkeella ja valitse ”tarkasta Elementti” kontekstivalikosta.

nyt sinulla on täysi visuaalinen pääsy kaikkiin sääntöihin, jotka on laskettu kyseiselle elementille. Jos et ole valinnut oikeaa elementtiä, voit klikata lähdettä ja osoittaa tarkan elementin, jonka haluat diagnosoida. Kuten näette kuvakaappaus yllä, nyt voit nipistää CSS sääntöjä. Käyttämällä valintaruutu vasemmalla puolella kunkin CSS omaisuutta voit vaihtaa, että ominaisuus, tai jopa klikkaa omaisuutta ja muuttaa sen arvoa, tai jopa paina enter-näppäintä ja lisätä uusia sääntöjä Elementti. Jopa hämmästyttävintä on se, kuinka helposti on mahdollista debugata elementin hover-tila yksinkertaisesti avaamalla valitun elementin vieressä oleva pudotusvalikko ja valitsemalla :hover-tila. Kuten voitte nähdä oikeassa paneelissa, tämä hämmästyttävä työkalu jopa näyttää tyyli arkki tiedosto ja rivinumero CSS sääntö, joka on toteutettu tällä sivulla. Lisäksi on ymmärrettävämpää ymmärtää, miksi meidän elementti on 10px ylä-ja alapehmustus sijaan 5px, koska sääntö rivillä 1026 tyyliä.CSS meidän median kyselyn CSS korvaa vanhan säännön rivillä 916 saman tiedoston. On jopa mahdollista nähdä valitun elementin laatikkomalli sen nykyisillä mitoilla ilman kolmannen osapuolen viivoitinta tai mittatyökalua. Ottaa tämä runsaasti tietoa nyt tekee meidän virheenkorjaus työtä paljon helpompaa. Oletetaan, että tyylisivusi sähköpostilomakekenttä ei ole samanlainen kuin muut syöttöelementit ja mietit, miten voisit ratkaista tämän. Tarkastat kyseisen elementin ja saat selville, että koska käytät uusia HTML5-syöttökenttätyyppejä, teemasuunnittelijasi ei ole sisällyttänyt CSS-sääntöjä input: lle, joten lisäät tämän valitsimen tyylilevyyn.

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

Google Chromella on myös samanlaiset kehittäjätyökalut, jotka mahdollistavat samat ominaisuudet. On jopa mahdollista muuttaa virheenkorjaustila näytön resoluutio laitteen, jonka haluat testata asettelun ja selvittää, miten media kyselyt CSS käyttäytyy näissä olosuhteissa.

nämä kehittäjätyökalut ovat erittäin tehokkaita ominaisuuksia jopa CSS kehitystä, kuten DOM tarkastus, JavaScript profilointi, JavaScript konsoli, resurssien seurantatyökalut, ja koko muu joukko ominaisuuksia, jotka tarvitsevat oman opetusohjelma Osa tämän artikkelin jälkeen. Kuten yllä olevasta kuvasta näkyy, Chromen kehittäjätyökaluissa on jopa mahdollista jäljitellä eri selaimen käyttäjäagenttia tai jopa jäljitellä kosketustapahtumia, kuten pyyhkäisyä. Näillä työkaluilla ei tarvitse edes aktiivisesti debugata CSS: ää älypuhelimen mobiiliselaimessa, ainakin jossain määrin.

mikä selaimen kehittäjätyökaluista on paras, selviää kokeilemalla. Loppujen lopuksi kaikki riippuu siitä, mitä yrität saavuttaa ja jos työkalusarja avulla voit päästä lopulliseen tavoitteeseesi. Itse käytän kaikkia näitä työkaluja hyödykseni. Jokaisella on jotain, josta pidän ja josta on hyötyä, kun haluan debugata koodiani. Esimerkiksi minusta pieni neliö väriesitys hex värit vieressä CSS väriominaisuudet jotenkin hyödyllinen, vaikka voin käsitellä RGB väri pääni ja saada likimääräinen väri kitalaki visualisointi, nämä pienet erot tekevät minusta vuorotellen näiden kehittäjien työkaluja.

Firebug

Firebug oli yksi ensimmäisistä työkaluista, joka tarjosi tarkastaja ominaisuus. Se on yksi suosituimmista web-kehitystyökaluista, ja sillä on lähes 3 miljoonaa päivittäistä keskivertokäyttäjää. Tätä kirjoitettaessa, Firefox CSS virheenkorjaus työkalut ovat riittäviä minulle ei käytä Firebug, mutta JavaScript virheenkorjaus Firefoxissa käytän edelleen Firebug.

Pelkäätkö IE7: ää? Älä ole enää.

saatat yllättyä, mutta Internet Explorer on jopa tarkastaa Elementti (Ctrl + B) ominaisuus niiden Kehittäjä työkalut (F12). Vaikka ei ole yhtä ystävällinen kuin muiden selainten kehittäjätyökalut, silti tämä Internet Explorer 9: ssä rakennettu ominaisuus on erittäin hyödyllinen IE7: n ja IE8: n emuloidun tilan asettelujen testaamiseen. Takaisin päivinä, jolloin mikään näistä Kehittäjän työkalut olivat käytettävissä virheenkorjaus vanhoja IE selaimet, Tämä toinen tekniikka oli yleensä erittäin kätevä.

2) Debug in Style

As good as Inspect Element is, sometimes either you do not have access to that tool, kuten mobile selaimet, or you want to adjust stailing of couple of elements in the page just a specific one. Rakastan tietää rajoja Elementti olen muotoilu, joten tiedän, jos on ylivuotoja, tai kelluva kysymyksiä, tai jne… Tästä syystä lisään kirkas ja havaittavissa taustaväri aktiivinen elementti olen muotoilu ja ottaa taustaväri pois, kun muotoilu on tehty. Joskus, menen edestakaisin säätämällä näitä elementtejä, joten vain siirtää virheenkorjaus koodi loppuun minun tyyli arkki ja kommentoida sitä, ja uncomment se, kun tarvitsen sitä uudelleen. Näin voin nopeasti vaihtaa virheenkorjaustilan ja nähdä, miten kukin elementti on sijoitettu näytölle.

joka johtaa …

tässä esimerkissä olen juuri lisännyt debug koodi päärakenne lohko kohteita sivu. Nyt voin kertoa, missä jokainen viesti alkaa ja kuinka paljon kuilu on kunkin viestin tai widget kohteen minun sivupalkissa, ja jos haluan lisätä kuilu sivupalkissa ja pääsisältö, voin visuaalisesti nähdä sen kirkkailla väreillä.

tämän vastakohta on myös mahdollinen määrittelemällä sarja debug-sääntöjä ja lisäämällä kyseinen luokka mihin tahansa haluamaamme kohtaan. Esimerkiksi yllä olen määritellyt uuden luokan nimeltä debug seuraavalla koodilla.

.debug{ border:1px solid red; }

ja aina kun haluan debugata jotain elementtiä, lisään vain debug-luokan kyseiseen elementtiin.

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

3) Debug CSS käyttäen JavaScript

tämä tekniikka on hyvin samanlainen kuin edellä, mutta joskus oudoista syistä käy niin, että yllä oleva tilanne ei ole toteutettavissa. Tämä on pala jQuery koodi, joka tulee avuksemme soveltamalla debug luokan Foo elementti, tai jopa lisäämällä CSS suoraan bar elementti tässä tapauksessa.

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

tällaista tilannetta saattaa sattua hyvin harvoin, mutta tiedän, että olen käyttänyt tätä tekniikkaa aiemmin, joten se on hyvä tietää.

4) Tutustu kaskadiin

jotkut CSS-ongelmat ovat niin yleisiä, kuten raivauslautat, että putoat tuohon ansaan kerran, ja seuraavan kerran kun kohtaat jotain vastaavaa, tiedät mikä aiheutti ongelman ja miten se korjataan. Yleensä suurin osa CSS-ongelmista on helppo ratkaista, jos tietää, miten CSS-säännöt ohittavat toisensa. Esimerkiksi tarkemmat valitsimet ohittavat yleisemmät, tai ID-valitsin ohittaa luokkavalitsimen, tai !important ilmoitus menee tavallisen ilmoituksen edelle. Tutustuminen Cascade auttaa ratkaisemaan Cascading Style Sheets koodi nopeammin.

tässä on esimerkki suoraan W3C-spektristä siitä, miten valitsimen spesifisyys toimii.

joitakin esimerkkejä:

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

yllä olevassa esimerkissä P-elementin väri olisi vihreä. ”Tyyli” – attribuutin julistus ohittaa tyylielementin yhden CSS-säännön 3 vuoksi, koska sillä on suurempi spesifisyys. Jos luulet, että tämä esimerkki on vaikea ymmärtää tarkista tämä artikkeli CSS arvojärjestys.

Loppuhuomautukset

pikselien täydellisten tulosten saavuttaminen on vaikeaa eri selainten erilaisten renderointien vuoksi. Jotkut vanhat selaimet eivät tue täyttä CSS3: A tai HTML5: tä, joten tarkista HTML5Please-yhteisöprojekti nähdäksesi, onko suurin osa selaimista tukenut käyttämääsi syntaksia. Voit kuitenkin vaihtoehtoisesti käyttää fallbackeja tai polyfillejä tarjoamaan puuttuvia ominaisuuksia selaimille, jotka eivät tue täyttä CSS3-tai HTML5-toteutusta.

Vastaa

Sähköpostiosoitettasi ei julkaista.