CSS online leesbaar maken
Voeg een compact stijlblad toe en lees het weer gemakkelijk. Selectors op eigen regels, één declaratie per regel en ingesprongen blokken en mediaquery’s zoals je die zelf zou schrijven.
Waarom productie-CSS één lange regel is
Stijlbladen voor productie worden vaak verkleind om minder tekst naar de browser te sturen. Bouwgereedschappen kunnen spaties en opmerkingen verwijderen, waarden inkorten of verenigbare regels samenvoegen. Het resultaat hangt af van het gekozen optimalisatiehulpmiddel en de instellingen; een bepaalde bestandsbesparing of snellere paginalading is niet gegarandeerd. Een samengesteld stijlblad met hulpklassen kan veel kleine regels bevatten, waardoor het compacte bestand lastig te overzien is. Opmaak geeft die regels een vaste, leesbare indeling, maar kan de broncomponenten, preprocessorbestanden of bouwconfiguratie waaruit ze voortkwamen niet herstellen.
De cascade weer kunnen volgen
De belangrijkste reden om een stijlblad op te maken is begrijpen waarom een regel wel of niet wordt toegepast. Zodra elke selector op een eigen regel staat, met de declaraties eronder ingesprongen, kun je de cascade goed volgen. Zoek alle regels die een element selecteren, vergelijk hun specificiteit, bekijk welke het laatst komt en ontdek die verdwaalde important die jouw werk overschrijft. Mediaquery’s en hun inhoud worden als blokken zichtbaar, waardoor responsief gedrag veel eenvoudiger te volgen is dan in een verkleind bestand. Kopieer voor gericht onderzoek de volledige regel en de relevante omringende mediaquery voordat je wijzigingen maakt. Het zichtbare stijlblad verklaart maar een deel van de cascade: inline stijlen, andere stijlbladen, overerving en het huidige DOM spelen ook mee. De ontwikkelaarstools van je browser laten zien welke declaraties daadwerkelijk op een element worden toegepast. Gebruik het opgemaakte bestand om die declaraties in hun context te begrijpen en controleer vervolgens het gedrag bij de schermbreedte die je onderzoekt. Als de automatische herkenning CSS als JavaScript aanmerkt, controleer dan het getoonde label voordat je op het resultaat vertrouwt.
Moderne CSS wordt ondersteund
De formatter begrijpt actuele CSS en is niet beperkt tot oudere syntaxis. Aangepaste eigenschappen, calc- en clamp-expressies, verkorte grid- en flexboxnotatie, containerquery’s, geneste regels, lagen, supports-blokken en keyframes behoren tot de ondersteunde onderdelen. Lange selectorlijsten worden over meerdere regels verdeeld, zodat je ze daadwerkelijk kunt lezen. Opmerkingen die het bouwproces hebben overleefd, blijven behouden. Als een bestand gewone CSS combineert met eigenschappen met leveranciersvoorvoegsels, blijven die declaraties in het resultaat staan terwijl de formatter zijn opmaakstijl toepast.
Een praktische tip voor samengestelde frameworks
Als je een samengesteld Tailwind- of Bootstrap-stijlblad opmaakt, wordt het bestand al snel erg lang; tienduizenden regels zijn normaal. Schakel regelnummers in en gebruik de zoekfunctie van je browser om de gewenste klassenaam of eigenschap te vinden, in plaats van te blijven scrollen. Wil je het bestand kleiner maken in plaats van het lezen, onthoud dan dat je vooral naar de bouwconfiguratie moet kijken. De ongebruikte regels zijn immers al gegenereerd voordat het verkleinen begon.
Veelgestelde vragen
Kan ik een samengesteld Tailwind-stijlblad leesbaar maken?
Ja, dat is een van de meest voorkomende toepassingen van deze pagina. Verwacht een erg lang resultaat, omdat het framework één regel per hulpklasse genereert. Regelnummers inschakelen en de zoekfunctie van je browser gebruiken is daarom de handigste manier om erin te navigeren.
Worden opmerkingen hersteld?
Opmerkingen die nog in de aangeleverde CSS staan, kunnen in de opgemaakte uitvoer verschijnen. Opmerkingen die bij het verkleinen zijn verwijderd, kun je niet uit dat bestand terughalen. Dat geldt ook voor uitleg over waarom een regel bestaat. Raadpleeg de oorspronkelijke bronrepository als je ontwerpnotities, aanwijzingen van de auteur of de geschiedenis van een selector nodig hebt.
Werkt het met SCSS of Less?
Deze pagina is bedoeld voor gewone CSS, waaronder de samengestelde uitvoer van Sass of Less. Variabelen, mixins en instructies die specifiek zijn voor preprocessors worden niet als invoer ondersteund. Compileer die bronbestanden eerst met het juiste projectgereedschap en gebruik daarna deze editor om het resulterende stijlblad te onderzoeken.