CSS-standaardwaarden voor html-elementen. CSS-standaard gebruiken om instellingen opnieuw in te stellen. Gebruik een apart CSS-document voor CSS Reset

De klasse ResourceBundle.Control heeft een reeks externe methoden die worden aangeroepen door de methode ResourceBundle.getBundle() bij het zoeken naar en laden van bundels. Door uw Control-klasse te maken, kunt u het standaardgedrag voor laden en caching wijzigen.

In dit geval moet u een implementatie maken van twee methoden van de klasse Control: getFormats() en newBundle() . De methode getFormats() is verantwoordelijk voor de ondersteuning van het XML-formaat, en newBundle() werkt met de resourcebundel. Er zijn hulpmethoden in de Control base-klasse om namen van basissets om te zetten in daadwerkelijke bronnamen.

Deze implementatie van de klasse ResourceBundle.Control bevat een subklasse van XMLResourceBundle. Deze subklasse wordt gebruikt om gegevens uit een XML-bestand te laden en te gebruiken in de ResourceBundle-methode.

Hieronder vindt u een beschrijving van de klasse Control en de implementatie van de ResourceBundle-methode:

java.io.* importeren;
importeer java.net.*;
java.util.* importeren;

Openbare klasse XMLResourceBundleControl breidt ResourceBundle.Control uit (
privé statisch Tekenreeks XML = "xml" ;

Openbare lijst getFormats(String baseName) (
return Collections.singletonList (XML);
}

Publieke bronnenBundel newBundle ( Tekenreeks basisnaam, landinstelling landinstelling,
Tekenreeksformaat, ClassLoader-lader,
Booleaans herladen)
gooit IllegalAccessException, InstantiationException, IOException{
if ((basisnaam == null ) || (landinstelling == null ) || (format == null )
|| (lader == nul )) (
gooi nieuwe NullPointerException () ;
}
ResourceBundle-bundel = null;
if (format.is gelijk aan (XML)) (
String bundelnaam = naarBundelnaam(basisnaam, landinstelling) ;
Tekenreeks resourceName = toResourceName
(bundelnaam, formaat) ;
URL-URL = loader.getResource
(bronnaam);
als (url != nul ) (
URLConnection-verbinding = url.openConnection() ;
if (verbinding != nul ) (
als (herladen) (
verbinding.setUseCaches(false);
}
InputStream-stream = verbinding.getInputStream() ;
als (stroom != nul ) (
BufferedInputStream bis = nieuwe BufferedInputStream (
stroom);
bundel = nieuwe XMLResourceBundle(bis);
bis.sluiten();
}
}
}
}
retourbundel;
}

Privé statische klasse XMLResourceBundle breidt ResourceBundle uit (
rekwisieten voor privé-eigendommen;

XMLResourceBundle(InputStream-stream) genereert IOException(
rekwisieten = nieuwe eigenschappen();
rekwisieten.loadFromXML(stream);
}

Beschermd object handleGetObject(String-sleutel) (
retourneer rekwisieten.getProperty(sleutel);
}

Openbare opsomming getKeys() (
Stel handleKeys = props.stringPropertyNames in() ;
return Collections.enumeration(handleKeys);
}
}

Openbare statische leegte hoofd (String-args) (
("Test2",
nieuwe XMLResourceBundleControl()) ;
Tekenreeks string = bundel.getString
("Helpsleutel");
System.out.println ("HelpKey: " + string ) ;
}
}

Deze implementatie omvat een testprogramma van drie lijnen:

ResourceBundle-bundel = ResourceBundle.getBundle("Test2", nieuwe XMLResourceBundleControl()) ;
Tekenreeks string = bundel.getString
("Helpsleutel");
System.out.println ("HelpKey: " + string ) ;

De eerste regel is hier van het grootste belang. U moet uw Control doorgeven aan de getBundle() -methode. Hierna kunt u de set gebruiken zoals in elk ander geval.

Hieronder ziet u een voorbeeld van een XML-bestand Test2.xml:

http://java.sun.com/dtd/properties.dtd" > OK Annuleren Hulp Ja Nee

Het resultaat van het uitvoeren van het XMLResourceBundleControl-programma is:

> java XMLResourceBundleControl HelpKey: Help

De bovenstaande implementatie maakt geen gebruik van de methoden getTimeToLive() en NeedsReload():

openbaar lang getTimeToLive( Tekenreeks basisnaam, landinstelling)

Openbare Booleaanse behoeftenReload( Tekenreeks basisnaam,
Landinstelling,
Tekenreeksformaat
ClassLoader-lader
ResourceBundle-bundel
lange laadtijd)

De methode getTimeToLive() retourneert de levensduur van resourcebundels die zijn gemaakt met ResourceBundle.Control . Bronsets worden in de cache opgeslagen om het herlaadproces te versnellen. Wanneer de set dus opnieuw wordt gedownload, bevindt deze zich in de cache. Een positieve time-to-live-waarde specificeert, in milliseconden, hoe lang de set in de cache blijft zonder opnieuw te worden gecontroleerd. De standaardwaarde die wordt geretourneerd door de methode getTimeToLive() is TTL_NO_EXPIRATION_CONTROL, waardoor de controle op de vervaldatum van de cache wordt uitgeschakeld. Als u de set niet in de cache wilt opslaan, retourneert u de waarde TTL_DONT_CACHE . Als 0 wordt geretourneerd, wordt de bundel in de cache opgeslagen, maar wordt deze elke keer gecontroleerd wanneer getBundle() wordt aangeroepen. Om de cache leeg te maken, roept u de statische clearCache() -methode van de ResourceBundle-klasse aan. Het heeft een optioneel ClassLoader-argument waarmee caches die door een specifieke lader zijn gemaakt, kunnen worden gewist.

De methode NeedsReload() bepaalt of de in de cache opgeslagen set opnieuw moet worden geladen. De waarde true betekent dat de set opnieuw moet worden geladen, en false betekent dat deze niet opnieuw hoeft te worden geladen. U kunt bepalen of een bronnenset opnieuw moet worden geladen door de methode NeedsReload() te overbelasten. Als u bijvoorbeeld wilt dat de resourceset altijd opnieuw wordt geladen, moet de methode NeedsReload() altijd true retourneren. In dit geval moet de methode getTimeToLive() altijd de waarde 0 retourneren. Anders wordt de set langer bewaard dan verwacht.

Voor meer informatie over verbeteringen met betrekking tot internationaliseringsprocessen in Mustang kunt u de blog van John Oconer, Sun-softwareontwikkelaar, raadplegen op

Dit artikel is het eerste in een serie over het temmen van CSS. Vandaag gaan we kijken naar technologie CSS-reset.

Waarom is dit nodig?

Elke browser stelt zijn eigen standaardstijlwaarden in voor verschillende HTML-elementen. Met behulp van CSS Reset kunnen we dit verschil nivelleren om compatibiliteit van stijlen tussen browsers te garanderen.

Je gebruikt bijvoorbeeld het element A in uw document. De meeste browsers, zoals Internet Explorer en Firefox, voegen een link toe blauw En onderstrepen. Stel je echter voor dat iemand over vijf jaar besluit een nieuwe browser te maken (laten we deze UltraBrowser noemen). De browserontwikkelaars hielden niet van de blauwe kleur en ergerden zich aan de onderstreping, dus besloten ze links te markeren in het rood En vetgedrukt. Het is hierop gebaseerd dat als u de basisstijlwaarde voor een element instelt A, dan is het gegarandeerd zoals u het wilt, en niet hoe de UltraBrowser-ontwikkelaars het het liefst weergeven.

Maar nu hebben we helemaal geen streepjes meer, ook niet tussen afzonderlijke paragrafen! Wat te doen? Lieg niet en wees niet bang: onder onze reset beschrijven we de regel die we nodig hebben. Dit kan op verschillende manieren: specificeer de inspringing onderaan of bovenaan de alinea, specificeer deze in percentage, pixels of em.

Het allerbelangrijkste is dat de browser nu volgens onze regels speelt, en niet wij volgens zijn regels. Ik besloot het op deze manier te doen:

* ( marge: 0; opvulling: 0; ) p ( marge: 5px 0 10px 0; )

Als resultaat kregen we wat te zien is in het derde voorbeeld.

U kunt uw eigen resetstijlen maken als u een specifiek probleem in uw project oplost. Desondanks is er geen stapsgewijze handleiding voor het maken van uw eigen CSS Reset. Vertrouw op je eigen principes en je eigen stijl.

Om u te helpen de juiste keuze te maken, volgen hier nog een paar links:

  1. Minder is meer - mijn keuze voor Reset CSS (Ed Elliott).

2. Uw CSS-reset is het eerste dat de browser moet zien

Het opnieuw instellen van stijlen nadat u uw eigen stijlen voor elementen heeft ingesteld, is de verkeerde aanpak. In dit geval mag u niets goeds verwachten van de browserweergave. Houd er rekening mee dat u altijd eerst CSS Reset moet opnemen en daarna alle andere stijlen.

Ja, ik begrijp dat het grappig klonk, maar dit is een van de belangrijkste fouten van ontwikkelaars, jong en oud. Veel mensen vergeten dit gewoon.

Sommigen stellen misschien een logische vraag: waarom gebeurt dit? Het antwoord is simpel: regels die lager in de tekst van het CSS-bestand zijn geschreven (en zelfs lager in hun volgorde in het document) overschrijven de eerder gedeclareerde regels.

Laten we niet te ver off-topic gaan en doorgaan. Laten we de stijlen van Eric Meyer op ons voorbeeld toepassen, maar na beschrijvingen van onze eigendommen, zoals weergegeven in voorbeeld 4. Wiskundigen zouden het volgende zeggen: “Dat is wat we moesten bewijzen.”

3. Gebruik een apart CSS-document voor CSS Reset

Ik moet (nee, ik werd geenszins gedwongen) dit advies te vermelden. Het gebruik van een apart bestand voor CSS Reset is een gangbare praktijk die door een groot aantal ontwikkelaars wordt ondersteund.

In feite neem ik de positie van creatie in één groot CSS-bestand vanwege de betere prestaties van deze aanpak. Maar wat dit betreft ben ik geneigd het met de meerderheid eens te zijn: CSS Reset moet in een apart bestand worden geplaatst (meestal reset.css genoemd). Op die manier kunt u het in verschillende projecten gebruiken zonder dat u moeite hoeft te doen om het van andere CSS-regels te scheiden.

4. Probeer het gebruik van een universele selector te vermijden

Hoewel dit concept werkt, is het gebruik ervan vaak niet wenselijk vanwege incompatibiliteit met sommige browsers (deze selector wordt bijvoorbeeld niet correct verwerkt in Internet Explorer). Je zou deze techniek alleen moeten gebruiken voor eenvoudige, kleine, statische en voorspelbare pagina's (als je dat zou moeten doen).

Dit advies is vooral belangrijk als u oplossingen zoals CMS-thema's ontwikkelt. Je kunt van tevoren niet voorspellen hoe het zal worden gebruikt of hoe het zal worden aangepast. Het is beter om fundamentele CSS-regels voor alle elementen te beschrijven dan om hiervoor het onvoorspelbare (zij het kleinere) mechanisme van universele selectors te gebruiken.

5. Vermijd overbodige eigenschapsbeschrijvingen bij het gebruik van CSS Reset

Een andere reden waarom ik niet van een apart bestand voor CSS Reset houd, is de potentiële redundantie van daaropvolgende CSS-eigenschapsdeclaraties. Het herhalen van individuele stijlen van jou binnen de hele set CSS-bestanden is een slechte manier van doen en moet worden vermeden. Natuurlijk zijn we soms te lui om nauwgezet een reeks stijlen door te nemen en er enkele te combineren, maar we moeten het in ieder geval proberen!

Laten we teruggaan naar Eric's CSS-reset. Het stelt standaardwaarden in voor de lijnhoogte, kleur en achtergrond van het element lichaam als volgt:

body ( lijnhoogte: 1; kleur: zwart; achtergrond: wit; )

Stel dat u al weet hoe het element eruit zal zien lichaam:
  1. achtergrondkleur: #cccccc;
  2. kleur: #996633;
  3. U wilt een bepaalde achtergrondafbeelding horizontaal herhalen.

In dit geval is het niet nodig om een ​​nieuwe selector te maken om uw eigenschappen te beschrijven; u kunt ze eenvoudigweg opnemen in de CSS Reset. Laten we dit doen:

body ( regelhoogte: 1; kleur: #996633; achtergrond:#ccc url(tiled-image.gif) repeat-x linksboven; )

Wees niet bang om de CSS Reset zelf aan te passen. Pas het aan jezelf aan, laat het voor je werken. Wijzig, herschik, verwijder en voeg toe indien nodig in uw specifieke geval.

Eric Meyer zei hierover het volgende: “dit is niet een geval waarin iedereen CSS Reset zonder wijzigingen zou moeten gebruiken.”



CSS Standaard CSS voor HTML-elementen (2)

Het is per browser verschillend, dus:

  • Firefox (gekko):. Of ga naar resource://gre-resources/ en kijk naar html.css.
  • Chroom/Safari (WebKit):
    • Chroom (knipperend):
  • Internet Explorer (Drietand), eerdere versies: http://web.archive.org/web/20170122223926/http://www.iecss.com/

Waar kan ik de CSS vinden voor de standaard CSS van de browser?

Veel HTML-elementen hebben een aantal standaard CSS-eigenschappen die soms tot onbekend/ongewenst gedrag kunnen leiden. Invoervelden worden bijvoorbeeld anders weergegeven in verschillende browsers. Ik ben op zoek naar een plek die nieuwe CSS3-eigenschappen en nieuwe HTML5-elementen omvat.

Ik heb in andere (veel oudere) vragen gezien (zoals standaard CSS-stylesheets in browsers) die een CSS-resetoplossing suggereren. Soms is deze oplossing niet nodig, vaak wil ik enkele basiseigenschappen behouden (zoals het markeren van invoervelden in Chrome). Met andere woorden: Ik wil dingen niet wegdoen alleen maar omdat ik niet weet wat ze doen. .

Dus, Is er een site die mij al deze informatie (of misschien wel de meeste) kan geven?

Er is een GitHub-repository voor alle W3C HTML-specificaties en standaard CSS-stylesheets voor ontwikkelaars te vinden

1.

2. Standaardstijlen voor Internet Explorer

3.

4. Standaardstijlen voor Opera

5. Standaardstijlen voor HTML4 (W3C-specificatie)

6. Standaardstijlen voor HTML5 (W3C-specificatie)

Voorbeeld, volgens de standaard W3C HTML4-specificatie:

Html, adres, blockquote, body, dd, div, dl, dt, fieldset, form, frame, frameset, h1, h2, h3, h4, h5, h6, noframes, ol, p, ul, center, dir, hr, menu, pre (weergave: blok; unicode-bidi: embed ) li (weergave: lijstitem) head (weergave: geen) table (weergave: tabel) tr (weergave: tabelrij) thead (weergave: tabelkop- group ) tbody ( weergave: tabel-rij-groep ) tfoot ( weergave: tabel-voettekst-groep ) col ( weergave: tabel-kolom ) colgroup ( weergave: tabel-kolom-groep ) td, th ( weergave: tabel-cel ) bijschrift (weergave: tabelbijschrift) th (lettertype: vetter; tekst uitgelijnd: midden) bijschrift (tekst uitgelijnd: midden) body (marge: 8px) h1 (lettergrootte: 2em; marge: .67em 0) h2 ( lettergrootte: 1.5em; marge: .75em 0 ) h3 ( lettergrootte: 1.17em; marge: .83em 0 ) h4, p, blockquote, ul, fieldset, form, ol, dl, dir, menu ( marge: 1.12em 0 ) h5 ( lettergrootte: .83em; marge: 1.5em 0 ) h6 ( lettergrootte: .75em; marge: 1.67em 0 ) h1, h2, h3, h4, h5, h6, b, sterk (lettertype: vetter) blockquote (marge-links: 40px; marge-rechts: 40px ) i, cite, em, var, adres (lettertype: cursief) pre, tt, code, kbd, samp (lettertypefamilie: monospace) pre (witruimte: pre) knop, textarea, invoer, selecteer (weergave: inline-block) groot ( lettergrootte: 1.17em ) klein, sub, sup ( lettergrootte: .83em ) sub ( verticaal uitgelijnd: sub ) sup ( verticaal uitgelijnd: super ) tabel ( randafstand: 2px; ) thead, tbody, tfoot (verticaal uitlijnen: midden) td, th, tr (verticaal uitlijnen: overnemen) s, strike, del (tekstdecoratie: line-through) hr (rand: 1px inzet ) ol, ul, dir, menu, dd ( marge-links: 40px ) ol ( lijststijltype: decimaal ) ol ul, ul ol, ul ul, ol ol ( marge-boven: 0; marge-onder: 0 ) u, ins ( tekstversiering: onderstrepen ) br:before ( inhoud: "\A"; witruimte: pre-line ) center ( tekstuitlijning: midden ) :link, :visited ( tekstversiering: onderstrepen ) :focus ( overzicht: dunne stippellijn omkeren ) /* Begin bidirectionele instellingen (niet wijzigen) */ BDO ( richting: ltr; unicode-bidi: bidi-override ) BDO ( richting: rtl; unicode-bidi: bidi-override ) * ( richting: ltr; unicode-bidi: embed ) * (richting: rtl; unicode-bidi: embed ) @media print ( h1 (pagina-einde-voor: altijd ) h1, h2, h3, h4, h5, h6 (pagina-einde-na: vermijd ) ul, ol, dl (pagina-einde-voor: vermijd ) )

Van de auteur: Het bouwen van websites op internet kan lijken op bouwen op drijfzand. Browsers doen hetzelfde, maar maken van tijd tot tijd hinderlijk onvoorspelbare verschillen. Alle browsers hebben bijvoorbeeld "user-agent stylesheets" - een standaardset CSS-stijlen om de koptekst op een koptekst te laten lijken, enz., zelfs voordat u stijlen aan de pagina toewijst1. Uiteraard gebruikt elke browser-engine iets andere standaardsets.

Een voorbeeld hiervan waren de standaardlijststijlen, waarbij de standaard browserstijlbladen van Internet Explorer en Opera aanvankelijk een lijstopvulling hadden margin-left: 30pt;, terwijl Firefox en KHTML werden geleverd met opvulling-left: 40px;. Als u de standaard opvulling zou willen wijzigen door ul (padding-left: 0;) te definiëren, zou dit in browsers heel andere resultaten opleveren.

CSS-INSTELLINGEN RESETTEN

Om een ​​beetje stabiliteit te bereiken, hebben sommige ontwikkelaars alle marges en opvulling opnieuw ingesteld met behulp van een universele selector:

* (marge: 0; opvulling: 0;)

* ( marge : 0 ; opvulling : 0 ; )

Door de inspringing van de lijst te definiëren en daar uw stylesheet te starten, krijgt u wat u verwacht. Het gebruik van * betekende echter dat de standaardmarge en opvulling voor alle elementen crashten, en zodra je een formulierelement toevoegde, werd het echt slecht.

Het doel van een reset is om alles te resetten wat je kunt... [en] als uitgangspunt te dienen voor je eigen basisstijlen- Eric Meijer

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acroniem, adres, groot, citeren, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, formulier, label, legenda, tabel, bijschrift, tbody, tfoot, thead, tr, th, td, artikel, terzijde, canvas, details, insluiten, figuur, figcaption, voettekst, koptekst, hgroup, menu, nav, uitvoer, robijn, sectie, samenvatting, tijd, markering, audio, video ( marge: 0; opvulling: 0; rand: 0; lettergrootte: 100%; lettertype: overnemen; verticaal uitlijnen: basislijn; )

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blokcitaat, pre,

a, afkorting, acroniem, adres, groot, citeren, code,

del, dfn, em, img, ins, kbd, q, s, samp,

klein, staking, sterk, sub, sup, tt, var,

b, u, ik, midden,

dl, dt, dd, ol, ul, li,

veldset, formulier, label, legenda,

tabel, onderschrift, tbody, tfoot, thead, tr, th, td,

artikel, terzijde, canvas, details, insluiten,

figuur, bijschrift, voettekst, koptekst, hgroup,

menu, nav, uitvoer, robijn, sectie, samenvatting,

tijd, markering, audio, video (

marge: 0;

opvulling: 0;

rand: 0;

lettergrootte: 100%;

lettertype: erven;

verticaal uitlijnen: basislijn;

Het reset enkele eigenschappen van veel (maar niet alle) elementen naar het platte-tekst-equivalent. Omdat alleen overeenkomende elementen worden gereset, vermijdt dit enkele problemen * (marge: 0; opvulling: 0;). We kunnen vervolgens stijlen definiëren voor deze weggegooide 'niet-gestylede' eigenschappen, in het vertrouwen dat we voortbouwen op een stabiele cross-browser basis. Deze stijltoekenning fungeert tevens als signaal voor de noodzaak om bewust passende stijlen voor deze elementen te bepalen.

PROBLEMEN BIJ HET RESETTEN VAN CSS-INSTELLINGEN

CSS-resets waren een redder in nood, maar nu, vooral met de opkomst van wireframes, worden ze vaak gebruikt zoals ze zijn. Eric ging er bijvoorbeeld van uit dat andere ontwikkelaars sites zouden gaan bouwen rond zijn voorgestelde reset-stijlen, en deze dienovereenkomstig zouden overschrijven, en de eerste versie van Meyer Reset bevatte tijdelijk deze regel:

/* vergeet niet om focusstijlen te definiëren! */ :focus ( overzicht: 0; )

Helaas heeft niet iedereen daadwerkelijk focusstijlen gedefinieerd, en Eric heeft deze uit de tweede versie verwijderd.

Door resets te gebruiken, voel je je een beetje een viezerik. Het opnieuw instellen van de standaardstijlen van de browser dwingt u na te denken over hoe elk element moet worden weergegeven, waardoor u ervoor kunt zorgen dat elementen worden toegepast op basis van semantiek in plaats van op standaardstijlen. Maar voor elementen als i en em is er bijna altijd een standaard browserstijl. Andere standaardstijlen van browsers, zoals de ooit belachelijk grote tekstgrootte van de koptekst, zijn veranderd en zijn nu standaard redelijk acceptabel. De problemen beginnen wanneer iemand een reset-HTML-element achteraf wil doorgeven met alleen de toegewezen "unstyled" reset-stijlen.

Voor mij is het grootste probleem met resets overerving, wat leidt tot spam in browsertools. Wanneer u probeert een CSS-probleem met een diep genest element in de code van iemand anders op te sporen, zal dit niet helpen:

CSS-resetregels herhaald vanwege overerving

NORMALIZE.CSS

Nicholas Gallagher en Jonathan Neal kozen voor een andere aanpak met Normalize.css, "een klein CSS-bestand dat zorgt voor een betere consistentie tussen browsers in de standaardstijlen van HTML-elementen." Net als bij CSS-resets biedt het ons een sterk startpunt voor meerdere browsers (de belangrijkste reden om überhaupt een reset te gebruiken), maar de twee benaderingen zijn filosofisch verschillend.

CSS-resets overschrijven user-agent-stijlen en brengen veel elementen terug naar hun "ongestylede" staat, een vlakke ondergrond waarop ze veilig kunnen bouwen. Vervolgens moeten we echter de meeste elementen vormgeven voordat we ermee kunnen bouwen. In plaats daarvan pakt Normalize.css alleen inconsistenties in de stijl van user-agents aan, waarbij de meest geschikte standaardinstellingen worden gekozen om het verschil te maken. Ook hier krijgen we een cross-browser veilige basis, maar wel één die genormaliseerde user-agent-stijlen bevat als kant-en-klare basisbouwstenen. Het is eigenlijk zoiets als een geïdealiseerde cross-browserversie van het standaard CSS 2.1-stylesheet. In beide gevallen moeten we dan onze eigen dominante stijlen toevoegen om de afbeelding te maken, maar omdat de standaard browserinstellingen in Normalize.css blijven bestaan, zijn er in totaal minder stijlen om toe te voegen.

Omdat de wijzigingen in Normalize.css doelgerichter zijn, is er geen sprake van een cascade van overerving van de herschreven regels in de ontwikkelingstools van uw browser. Hier is een eenvoudige ul:, gedestyled met Meyer Reset en Normalize.css versies 1 en 2:

'Ongestyled'-element van een ongeordende lijst

Meyer-reset toepassen

Pas Normalize.css v1 toe

Normalize.css v2 toepassen

Er is een duidelijk verschil in filosofie wanneer het voorbeeld van Meyer Reset verschijnt als een paar regels platte tekst zonder marges, opvulling of opsommingstekens, terwijl de voorbeelden van Normalize.css eruit zien als standaardstijlen. Het verschil in de stijlen die op deze ul worden toegepast, is ook gemakkelijk merkbaar.

Dit zijn echter niet alle stijlen die op de ul worden toegepast. Ter vergelijking: hier is hetzelfde “ongestylede” screenshot, maar met zichtbare user-agent-stijlen, in Firefox 21 en Opera Next 15.