CSS-overzicht: Identificeer potentiële CSS-verbeteringen

Jecelyn Yeen
Jecelyn Yeen

Gebruik het paneel CSS-overzicht om de CSS van uw pagina beter te begrijpen en mogelijke verbeteringen te identificeren.

Overzicht

Het CSS-overzichtspaneel maakt een rapport van de CSS-statistieken van uw website. Dit rapport verzamelt gegevens over alle CSS-voorvallen en zelfs ongebruikte declaraties. Het CSS-overzichtspaneel helpt u gebeurtenissen verder te onderzoeken door paginamarkeringen te maken of door rechtstreeks te linken naar de betrokken code in het Elementenpaneel .

Bekijk hoe u een CSS-overzichtsrapport kunt uitvoeren en opnieuw kunt uitvoeren en hoe u het CSS-overzichtsrapport kunt begrijpen .

Open het paneel CSS-overzicht

  1. Open een webpagina, zoals deze pagina .
  2. Open DevTools .

  3. Selecteer Meer. Pas DevTools aan en beheer deze > Meer tools > CSS-overzicht .

    CSS-overzicht in het menu.

    U kunt ook het Commandomenu gebruiken om het CSS-overzichtspaneel te openen.

    Geef de opdracht CSS-overzicht weer in het menu Commando.

Voer een CSS-overzichtsrapport uit en voer het opnieuw uit

  1. Klik op de knop Overzicht vastleggen om een ​​CSS-overzichtsrapport van uw pagina te genereren.

    CSS-overzicht vastleggen.

  2. Om een ​​CSS-overzicht opnieuw uit te voeren, klikt u op de Duidelijk. Overzichtspictogram wissen en herhaal de eerste stap.

    Duidelijk overzicht.

Begrijp het CSS-overzichtsrapport

Het rapport bestaat uit vijf delen:

  1. Overzicht samenvatting . Een samenvatting op hoog niveau van de CSS van uw pagina. Overzicht samenvatting.

  2. Kleuren . Alle kleuren op uw pagina. De kleuren zijn gegroepeerd op type, zoals achtergrondkleuren, tekstkleuren, enz. In dit gedeelte worden ook teksten weergegeven met weinig contrast.

    Kleuren.

    Elke kleur is klikbaar. Stel dat de randkleur #DADCE0 niet overeenkomt met het kleurenschema van uw site. Voor een lijst met elementen die deze kleur gebruiken, klikt u op de kleur.

    Een lijst met elementen die de kleur gebruiken.

    Om het element op de pagina te markeren, beweegt u de muis over het element in de lijst.

    Beweeg over een element om het element op de pagina te markeren.

    Om het element in het paneel Elementen te openen, klikt u op het element in de lijst.

  3. Lettertype-informatie . Alle lettertypen op uw pagina en hun voorkomen, gegroepeerd op verschillende lettergrootte, letterdikte en regelhoogte. Om de lijst met getroffen elementen te bekijken, net als in de sectie Kleuren , klikt u op de exemplaren ervan.

    Lettertype-informatie.

  4. Ongebruikte verklaringen . Alle stijlen die geen effect hebben, gegroepeerd op reden.

    Ongebruikte verklaringen.

    De twee bovenstaande declaraties zijn bijvoorbeeld ongebruikt omdat de inhoud de hoogte en breedte van een inline-element bepaalt. Om de overeenkomstige elementen te bekijken, klikt u op de exemplaren.

  5. Mediavragen . Alle mediaquery's die op uw pagina zijn gedefinieerd, gesorteerd op aantal exemplaren in aflopende volgorde. Om de lijst met getroffen elementen te bekijken, klikt u op hun voorkomen.

    Mediavragen.