4 jednoduché techniky pro rychlé ladění a opravu kódu CSS v téměř každém prohlížeči

4 jednoduché techniky pro rychlé ladění a opravu kódu CSS v téměř každém prohlížeči

navrhli jste perfektní rozvržení pro nové a nadcházející webové stránky. Ale teď převést všechny ty krásné Photoshop PSD vrstvený soubor do pixel perfektní kód je náročná část. Není to náročné, protože nevíte, jak kódovat, ale náročnější, protože různé prohlížeče vykreslují váš kód odlišně, i když používáte zcela platný kód CSS k zobrazení tohoto úžasného sémantického kódu HTML5, který jste napsali. To je ještě frustrující, když Oprava chyby v jednom prohlížeči se nyní stává novou chybou v jiném prohlížeči. I když to není náročné, teď si představte, že jste přiřazeni k opravě kódu někoho jiného, který je všude. Tento poslední případ je často ten, který vás nutí tahat si vlasy a říkat četné WTFs, než úplně pochopíte, co se děje v jejich kódu, protože pravděpodobně znáte celý svůj styl ze srdce a tento nový kód není v blízkosti jakékoli konvence kódování. Nicméně, moment dostat dolů a špinavé s laděním, že CSS kód je mnohem jednodušší a méně frustrující než dříve, díky těmto velmi jednoduchých nástrojů a technik.

1) Zkontrolujte nástroj Element

zkontrolujte prvek zdaleka je nejlepší nástroj pro spuštění ladění cokoliv CSS. Pokud vyvíjíte webové stránky, potřebujete správnou sadu nástrojů pro vývoj webových stránek. A naštěstí Inspect Element je nyní nativně integrován se všemi moderními webovými prohlížeči jako součást jejich vývojářských nástrojů. Tento nástroj vám umožní vybrat konkrétní prvek na stránce, kterou chcete opravit, a okamžitě zjistit, jaká pravidla CSS se vztahují na tento prvek, který způsobí, že se vybraný prvek zobrazí tímto způsobem. Jediné, co musíte udělat, je kliknout pravým tlačítkem myši a v kontextové nabídce vybrat „zkontrolovat prvek“.

Nyní máte plný vizuální přístup ke všem pravidlům, která jsou pro tento prvek vypočtena. Pokud jste nevybrali správný prvek, můžete jednoduše kliknout na zdroj a určit přesný prvek, který chcete diagnostikovat. Jak vidíte na obrázku výše, nyní můžete vyladit pravidla CSS. Pomocí zaškrtávacího políčka na levé straně každé vlastnosti CSS můžete tuto vlastnost přepnout, nebo dokonce kliknout na vlastnost a změnit její hodnotu, nebo dokonce stisknout klávesu enter a přidat nová pravidla pro svůj prvek. Ještě nejúžasnější je, jak snadno je možné ladit stav vznášení prvku pouhým otevřením rozbalovací nabídky vedle vybraného prvku a výběrem :stav vznášení. Jak jste mohli vidět na pravém panelu, tento úžasný nástroj vám dokonce ukáže soubor stylů a číslo řádku pravidla CSS, které se provádí na této stránce. Navíc je srozumitelnější pochopit, proč má náš prvek 10px horní a dolní polstrování místo 5px, protože pravidlo na řádku 1026 stylu.css našeho mediálního dotazu CSS přepíše staré pravidlo na řádku 916 stejného souboru. Je dokonce možné vidět model boxu vybraného prvku s jeho aktuálními rozměry bez použití pravítka třetí strany nebo měřicího nástroje. Díky tomuto množství informací je nyní naše ladicí práce mnohem jednodušší. Předpokládejme, že pole e-mailového formuláře vašeho stylu není podobné jiným vstupním prvkům a zajímá Vás, jak byste to mohli vyřešit. Zkontrolujete tento prvek a zjistíte, že protože používáte nové typy vstupních polí HTML5, váš návrhář motivů nezahrnul žádná pravidla CSS pro input, takže tento volič přidáte do stylového listu.

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

Google Chrome má také podobné vývojářské nástroje, které umožňují stejné funkce. Je dokonce možné změnit režim ladění na rozlišení obrazovky zařízení, které chcete otestovat rozvržení a zjistit, jak se vaše mediální dotazy CSS chovají za těchto podmínek.

tyto vývojářské nástroje mají velmi výkonné funkce i mimo vývoj CSS, jako je DOM inspekce, profilování JavaScriptu, konzola JavaScriptu, nástroje pro monitorování zdrojů a celá další sada funkcí, které potřebují vlastní výukový oddíl mimo tento článek. Jak můžete vidět na obrázku výše, v nástrojích pro vývojáře Chrome je dokonce možné emulovat jiného uživatelského agenta prohlížeče nebo dokonce napodobovat dotykové události, jako je přejetí prstem. S těmito nástroji ani nemusíte aktivně ladit CSS v mobilním prohlížeči smartphonu, alespoň do určité míry.

které vývojářské nástroje prohlížeče jsou nejlepší, je otázka, kterou zjistíte experimentováním. Na konci dne to vše závisí na tom, čeho se snažíte dosáhnout, a pokud vám tato sada nástrojů umožní dosáhnout konečného cíle. Já osobně používám všechny tyto nástroje ve svůj prospěch. Každý z nich má něco, co se mi líbí a je užitečné, když chci ladit svůj kód. Například považuji malou čtvercovou barevnou reprezentaci hex barev vedle barevných vlastností CSS za užitečnou, i když mohu zpracovat barvu RGB v mé hlavě a získat přibližnou vizualizaci barevného patra, tyto malé rozdíly mě střídají mezi těmito vývojářskými nástroji.

Firebug

Firebug byl jedním z prvních nástrojů, které poskytovaly funkci inspektora. Je to jeden z nejpopulárnějších nástrojů pro vývoj webových aplikací s téměř 3 miliony průměrných denních uživatelů. Od tohoto psaní jsou nástroje pro ladění CSS Firefoxu dostačující, abych nepoužíval Firebug, ale pro ladění JavaScriptu ve Firefoxu stále používám Firebug.

Bojíte se IE7? Nebuď už

možná vás překvapí, ale Internet Explorer má dokonce ve svých vývojářských nástrojích (F12) funkci Inspect Element (Ctrl+B). Ačkoli to není tak přátelské jako vývojářské nástroje jiných prohlížečů, stále tato funkce postavená v aplikaci Internet Explorer 9 je velmi užitečná pro testování rozvržení v emulovaném režimu IE7 a IE8. V dobách, kdy žádný z těchto vývojářských nástrojů nebyl k dispozici pro ladění starých prohlížečů IE, byla tato druhá technika obvykle velmi užitečná.

2) ladění ve stylu

jak dobrý je Inspect Element, někdy buď nemáte přístup k tomuto nástroji, jako jsou mobilní prohlížeče, nebo chcete upravit styl několika prvků na stránce místo pouze konkrétního. Miluji znát hranice prvku jsem styling, takže vím, jestli tam je nějaký přetečení, nebo plovoucí problémy, nebo etc … z tohoto důvodu jsem přidat jasnou a znatelnou barvu pozadí na aktivní prvek jsem styling a vzít barvu pozadí ven, jakmile styling je hotovo. Někdy jdu tam a zpět a upravuji tyto prvky, takže jen přesunu ladicí kód na konec svého stylového listu a komentuji jej a odkomentuji, jakmile to znovu potřebuji. Tímto způsobem mohu rychle přepínat režim ladění a zjistit, jak je každý prvek umístěn na obrazovce.

což má za následek …

pro tento příklad jsem právě přidal ladicí kód k položkám hlavního bloku struktury na mé stránce. Nyní mohu říci, kde začíná každý příspěvek a kolik mezery je mezi každým příspěvkem nebo položkou widgetu v postranním panelu, a pokud chci přidat mezeru mezi postranním panelem a hlavním obsahem, mohu ji vizuálně vidět v jasných barvách.

opak toho je také možný definováním řady pravidel ladění a přidáním této třídy k jakékoli položce, kterou chceme vidět. Například výše jsem definoval novou třídu nazvanou debug s následujícím kódem.

.debug{ border:1px solid red; }

a kdykoli chci ladit jakýkoli prvek, jednoduše k tomuto prvku přidám třídu ladění.

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

3) ladění CSS pomocí JavaScriptu

tato technika je velmi podobná výše, ale někdy z nějakých podivných důvodů se stává, že výše uvedená situace není proveditelná. Jedná se o kus kódu jQuery, který nám pomůže použitím třídy ladění na prvek foo nebo dokonce přidáním CSS přímo do prvku lišty v tomto případě.

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

tato situace se může stát velmi zřídka, ale vím, že jsem tuto techniku použil v minulosti, takže je dobré to vědět.

4) seznamte se s Kaskádou

některé problémy CSS jsou tak běžné, jako jsou clearingové plováky, že jednou spadnete do této pasti a příště se setkáte s něčím podobným, víte, co způsobilo problém a jak jej opravit. Obecně lze většinu problémů CSS snadno vyřešit, pokud víte, jak se pravidla CSS navzájem převažují. Například konkrétnější selektory budou přepisovat obecnější, nebo volič ID přepíše volič třídy, nebo !important deklarace má přednost před normálním deklarací. Seznámení s Kaskádou vám pomůže rychleji vyřešit kód kaskádových stylů.

zde je příklad přímo z W3C spec o tom, jak selektor specificita funguje.

některé příklady:

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

ve výše uvedeném příkladu by barva prvku P byla zelená. Deklarace v atributu „styl“ přepíše deklaraci v prvku stylu kvůli kaskádovému pravidlu 3, protože má vyšší specifičnost. Pokud si myslíte, že tento příklad je těžké pochopit, zkontrolujte tento článek o CSS pořadí priority.

závěrečné poznámky

dosažení dokonalých výsledků pixelů je obtížné kvůli různým vykreslením různými prohlížeči. Některé staré prohlížeče nepodporují plnou CSS3 nebo HTML5, takže zkontrolujte HTML5 komunitní projekt a zjistěte, zda syntaxe, kterou se pokoušíte použít, je podporována většinou prohlížečů. Nicméně, můžete volitelně použít fallbacks nebo polyfills poskytnout chybějící funkce pro prohlížeče, které nepodporují plnou implementaci CSS3 nebo HTML5.

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna.