NL

CSS minifier: CSS minimaliseren, opmaken en in HTML inlinen

Met deze CSS minifier maak je een stylesheet kleiner, leesbaar of zet je hem in style-attributen voor e-mailnieuwsbrieven. Opmerkingen, witruimte en overbodige nullen verdwijnen zonder dat de werking verandert. Syntaxfouten noemen de regel en je code blijft in de browser.

Bron: W3C CSS Syntax Module Level 3 (Tokenisierung, Kommentare, Zeichenketten, At-Regeln). Bijgewerkt: .

Mijn toolboxJe invoer wordt alleen in deze browser opgeslagen.

De code wordt alleen in je browser verwerkt. Plak in de inline-modus een compleet HTML-document of een fragment met <style>.

Je tekst blijft in je browser: hij wordt niet verstuurd, niet opgeslagen en niet in de adresbalk gezet.

Wordt behandeld als nog een style-blok aan het einde, bijvoorbeeld uit een apart CSS-bestand.

Resultaat

Resultaat
.button{color:#fff;background:#05a;margin:0 auto;padding:.5em 1em}.button:hover{background:#037}@media (max-width:600px){.button{padding:.25em}}
Omvang
216 → 144 tekens (33% kleiner).
Verwijderd: 1 opmerkingen, 0 lege regels. Opmerkingen die met /*! beginnen blijven behouden.

Zo wordt het berekend

Deze tool biedt drie dingen voor stylesheets: minimaliseren voor kleine bestanden, opmaken voor leesbare code en inlinen voor html-e-mail, waar sommige programma’s style-blokken negeren of inkorten.

CSS minimaliseren

  1. Kies “Minimaliseren” en plak je CSS.
  2. Kopieer het resultaat of download het als style.min.css. Eronder zie je hoeveel kleiner het bestand is geworden.

Alleen omzettingen die de werking niet veranderen worden toegepast: opmerkingen (behalve /*! … */) en witruimte verdwijnen, net als de laatste puntkomma voor }, 0.50em wordt .5em, #aabbcc wordt #abc en 0px wordt 0. Nullen met eenheid blijven staan waar ze nodig zijn: in calc(), min(), max(), clamp(), in de flex-afkorting, bij tijd, hoek en percentage en in custom properties. Tekenreeksen en url() blijven ongewijzigd.

CSS opmaken

Samengedrukte CSS wordt leesbare code: één declaratie per regel, selectorlijsten regel voor regel, ingesprongen blokken en een lege regel tussen regels. Opmerkingen blijven behouden.

CSS in HTML inlinen

Plak een HTML-document met een style-blok. Voor elk element worden de passende regels beoordeeld, gesorteerd op specificiteit en volgorde en in het style-attribuut geschreven. Een bestaand style-attribuut wint van gewone regels en !important van alles. Wat niet in een element kan, zoals :hover, pseudo-elementen, @media en @font-face, blijft in een style-blok staan.

Goed om te weten

Je code blijft in je browser en wordt niet verstuurd of opgeslagen.

Veelgestelde vragen

Hoe kan ik CSS minimaliseren?

Kies de modus “Minimaliseren” en plak de CSS. Opmerkingen, witruimte en overbodige nullen worden verwijderd en het resultaat kun je kopiëren of als bestand downloaden.

Verandert minimaliseren hoe de pagina eruitziet?

Nee, alleen veilige omzettingen worden toegepast. Nullen met eenheid blijven bijvoorbeeld staan in calc() en in de flex-afkorting, omdat ze daar nodig zijn. Tekenreeksen en url() blijven onaangeroerd.

Waarvoor dient het inlinen van CSS?

Sommige e-mailprogramma’s negeren style-blokken geheel of gedeeltelijk. Bij het inlinen wordt elke regel als style-attribuut in het element geschreven, zodat de opmaak aankomt.

Wat gebeurt er met :hover en @media bij het inlinen?

Die kunnen niet in een element worden geschreven en blijven daarom in een style-blok in de head staan. Programma’s die ze ondersteunen, passen ze nog steeds toe.

Hoe lost de tool tegenstrijdige regels op?

Volgens de CSS-cascade: eerst !important, dan hogere specificiteit en bij gelijkspel de latere regel. Een bestaand style-attribuut telt als een selector met de hoogste specificiteit.

Wordt mijn code geüpload?

Nee. Alles gebeurt in je browser; de code wordt niet verstuurd, niet opgeslagen en niet in de adresbalk gezet.

Bronnen en wettelijke basis

Bijgewerkt op: · Redactioneel beleid

Vergelijkbare tools