jak ladit CSS pomocí vývojových nástrojů prohlížeče

CSS není programovací jazyk. Dosud, v závislosti na tom, koho se ptáte, vám řekne, psaní dobré CSS může být někdy stejně náročné jako psaní v programovacích jazycích, jako je Java nebo JavaScript.

v tomto článku vám chci ukázat několik triků, jak můžete ladit problémy CSS a vyřešit je. Jako dobrý webový vývojář byste měli být obeznámeni s nástroji pro vývojáře prohlížečů (např.

režim Wireframe

bojujete s problémy s rozvržením? Možná vám vzhled podobný drátovému modelu pomůže lépe porozumět rozvržení. Následující pravidlo CSS způsobí, že každý prvek bude mít černé pozadí, zelenou barvu textu a červený okraj. Pravidlo můžete přidat buď do šablony stylů, nebo přímo do prohlížeče. V závislosti na případu použití můžete toto pravidlo dokonce vylepšit. Nezapomeňte to zakázat při výrobě!

*{
background: #000 !important;
color: #0f0 !important;
outline: solid #f00 1px !important;
}

Vypočtené vlastnosti stylu

Některé prohlížeče, vývojové nástroje (např. Nástroje pro vývojáře Chrome) vám nabízejí zobrazení zobrazující vlastnosti stylu, které jsou aplikovány na konkrétní prvek. Zde můžete také vidět pro každou vlastnost stylu, kde byla nastavena.

Testování CSS dotazy přímo v prohlížeči

Pokud si nejste inlining styly, budete muset vytvořit platí CSS deklarace bloků. Někdy se mohou selektory CSS komplikovat při čtení a zápisu. Rychlý způsob, jak ověřit, zda selektory CSS fungují správně, je vyhledávání přímo v nástrojích pro vývoj prohlížeče. Můžete hledat selektory textu i CSS.

Přepínání prvek státy

Některé prvky jako vstupní pole jsou stylizované, když jsou zaměřeny. Ostatní prvky, jako jsou tlačítka, reagují, když na ně umístíte kurzor myši. Většina nástrojů pro vývoj prohlížeče umožňuje přepínat stavy prvků, jako je focus nebo hover. Pokud však posluchač DOM poslouchá tuto událost, přepínání stavu prvku obvykle nevyhodí událost, kterou by tento posluchač zaregistroval.

Závěr

Napsat komentář

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