Kaskádové styly(CSS) - je to výkonný nástroj pro vytvoření atraktivního a moderního designu webových stránek. Někdy však možná budete muset deaktivovat CSS pro různé účely, například pro kontrolu, jak bude stránka vypadat bez stylů nebo pro určení příčiny problémů se zobrazením.
Google Chrome je jedním z nejoblíbenějších prohlížečů a má snadný způsob, jak deaktivovat CSS pro zobrazení stránky bez stylů. V tomto podrobném návodu se podíváme na to, jak zakázat CSS v prohlížeči Chrome, abyste mohli tuto funkci používat pro své potřeby.
Krok 1: Otevřete Google Chrome a přejděte na webovou stránku, pro kterou chcete deaktivovat CSS.
Krok 2: Klikněte pravým tlačítkem kamkoli na stránku a v kontextové nabídce, která se otevře, vyberte možnost "zkontrolovat". Tím se otevře panel vývojáře.
Krok 3: V panelu vývojáře, vyhledejte horní panel nástrojů, který obsahuje ikonu "Toggle Device Toolbar" (přepínání panelu nástrojů zařízení). Klikněte na tuto ikonu.
Krok 4: Po kliknutí na ikonu "Toggle Device Toolbar" se horní panel nástrojů změní a uvidíte nová tlačítka. Jedním z těchto tlačítek je "toggle CSS" (přepnout CSS). Klikněte na toto tlačítko.
Po provedení těchto kroků bude webová stránka stažena bez CSS a budete si moci prohlédnout, jak vypadá bez stylů. To může být užitečné pro vývojáře, projektanty a ty, kteří chtějí vědět, které prvky stránky jsou stylizované a jak změny v CSS ovlivňují zobrazení.
Nyní, když víte, jak deaktivovat CSS v prohlížeči Google Chrome, můžete tuto funkci použít pro své potřeby. A pamatujte, že zapnutí a vypnutí CSS jsou užitečné nástroje, které vám pomohou lépe porozumět tomu, jak jsou webové stránky vytvářeny, a poskytnou větší kontrolu nad zobrazením stránky.
Krok 1: Otevřete webového vývojáře v prohlížeči Chrome
Chcete-li zakázat CSS v prohlížeči Chrome, musíte otevřít vestavěného webového vývojáře (DevTools). K tomu lze použít jeden z následujících způsobů:
Metoda 1:
Klikněte pravým tlačítkem na libovolnou oblast stránky a v kontextové nabídce vyberte možnost "prozkoumat položku".
Webový vývojář se otevře ve spodní nebo boční části okna prohlížeče (v závislosti na vaší konfiguraci).
Metoda 2:
Klikněte na ikonu tří teček (vertikální nebo horizontální) v pravém horním rohu okna prohlížeče a z rozbalovací nabídky vyberte možnost "Další nástroje" a poté "nástroje pro vývojáře".
Webový vývojář se otevře v samostatném okně nebo na kartě.
Jakmile je webový vývojář otevřen, můžete přejít k dalšímu kroku - deaktivaci CSS.
Krok 2: Přejděte na kartu "Elements"
Jakmile otevřete vývojářské nástroje, musíte přejít na kartu "Elements". Chcete-li to provést, jednoduše přepněte na příslušnou kartu kliknutím na ni levým tlačítkem myši.
Na kartě "Elements" uvidíte zdrojový kód webové stránky. Zde můžete vidět strukturu stránky a všechny její prvky - značky, třídy, ID a další atributy.
Chcete-li zakázat styly CSS, můžete dočasně odstranit nebo zakázat příslušná pravidla CSS. Stačí najít požadovaný prvek nebo styl ve zdrojovém kódu stránky a kliknout na něj pravým tlačítkem. Poté vyberte možnost "Upravit jako HTML"nebo" upravit jako text". Nyní můžete odstranit nebo komentovat pravidla CSS a deaktivovat je během ladění nebo analýzy webové stránky.
Krok 3: Najděte a deaktivujte styly webové stránky
Chcete-li zakázat styly webové stránky v prohlížeči Google Chrome, postupujte takto:
- Klikněte pravým tlačítkem na stránce a vyberte možnost "prozkoumat položku".
- Ve spodní části obrazovky se otevře panel nástrojů Elements (položky) se seznamem kódu HTML webové stránky.
- Na pravé straně panelu nástrojů vyhledejte kartu "styly" (styly) a klikněte na ni.
- Najděte položku, jejíž styly chcete deaktivovat. Může to být celý prvek, například značka
nebo, nebo třída uvedená v atributu" class " prvku.
- Chcete-li deaktivovat jeho styly, zrušte zaškrtnutí políčka napravo od názvu položky nebo třídy. Při tom uvidíte, že změny jsou aplikovány okamžitě na webové stránce.
Pokud chcete zakázat všechny styly na celé webové stránce, zrušte zaškrtnutí políčka napravo od značky v panelu nástrojů Elements.
Po deaktivaci stylů budete moci procházet webovou stránku bez externího designu, což může být užitečné pro analýzu její struktury, debugging a testování.
Krok 4: Zkontrolujte výsledek
Krok 4. Zavřít kartu Nastavení a vrátit se na webovou stránku, kterou chcete zkontrolovat bez CSS.
Nyní byste měli vidět, že se webová stránka zobrazuje bez použití CSS. Veškerý vizuální styl, barvy, písma a uspořádání prvků mohou vypadat jinak nebo se bez použití CSS stanou méně čitelnými.
Krok 5: povolit CSS zpět
Pokud se chcete vrátit k normálnímu zobrazení webové stránky a povolit CSS, můžete použít následující způsoby:
1. Klikněte pravým tlačítkem na stránce a vyberte možnost "zkontrolovat".
2. V nástroji vývojáře, který se otevře, vyhledejte kartu "Styly"nebo " styly".
3. Zrušte zaškrtnutí možnosti "Disable All Styles"nebo" zakázat všechny styly".
4. Uložte změny a zavřete vývojářský nástroj.
Stránka se nyní zobrazí s ohledem na její původní styly.
Poznámka: Povolený CSS může zpomalit načítání webové stránky, takže pokud máte problémy s rychlostí provozu, je vhodné CSS vypnout pouze po dobu nezbytnosti.