Uitkleden om indruk te maken; Controleer uw websites zonder CSS

HTML vormt de kern van het internet. Soms, in het streven om dingen er mooi uit te laten zien met behulp van CSS, vergeten we dat. Als u ooit Sass (of een CSS-compiler in het algemeen) hebt gebruikt, heeft u waarschijnlijk gezien dat de stijlen van uw site zijn verbroken vanwege een compileerfout. Maar voordat u de fout die u net heeft ingevoerd, snel kunt oplossen, kunt u dit als een mogelijkheid gebruiken om de kern van uw site te analyseren en te verbeteren: de HTML.

"Falen is gewoon de mogelijkheid om opnieuw te beginnen, deze keer intelligenter." - Henry Ford

Normaal gesproken ben ik niet een voor motivationele clichés. Falen omzetten in een kans op succes kan echter waar blijven als je met Sass (of een willekeurige CSS-compiler) werkt. Draag met mij en ik zal het uitleggen.

Laten we beginnen met een fout

Als je CSS hebt geschreven met behulp van Sass, heb je ongetwijfeld een compileerfout gezien. In de opdrachtregel ziet het er ongeveer zo uit:

Syntaxisfout: ongeldige CSS na ".module": verwacht "", was ""

Soms zie je die fout mogelijk niet in de opdrachtregel. U zult echter ongetwijfeld de fout ontdekken wanneer u naar de browser overschakelt omdat alles verbroken lijkt!

Uw eerste reactie kan zijn dat u onmiddellijk terugkeert naar uw teksteditor, de syntaxisfout corrigeert die u net hebt ingevoerd en ziet dat alles weer normaal wordt. Maar wacht even! Dit zou een van die momenten kunnen zijn die 'mislukken in een kans'.

Sass breaking kan een geweldige kans zijn om uw site naakt te zien, volledig uitgekleed. Geen styling, alleen pure, onaangetaste HTML, de essentie van het web in zijn kern. U ziet dat wanneer de browser een verzoek doet, deze in het algemeen een single terugkrijgt .html bestand-pure hyptertext-en dat is het. Al het andere (zoals CSS en Javascript) is een verbetering. Zoals Jeremy Keith zegt,  

"Elke regel CSS die je schrijft, is een suggestie. U dicteert niet hoe de HTML moet worden gerenderd; u suggereert hoe de HTML moet worden weergegeven. Ik vind dat een zeer bevrijdend en stimulerend idee. " 

CSS-stijlregels zijn enkele van de eerste verbeteringen die u toepast op een HTML-document en fungeren als suggesties, niet commando's, voor hoe de pagina eruit moet zien. Het zien van die stijlen-onderbreking kan een gelegenheid zijn om te stoppen en de kern van uw webpagina te analyseren - de HTML - en deze indien nodig te verbeteren. HTML is een langetermijnindeling die al geruime tijd bestaat. Niet alleen werkt de eerste website nog, het is ook effectief responsief! 

Zoals Ian Yates zei, 

"Alle websites reageren standaard, totdat we stijlen gaan toevoegen en breken."

Als u naar de pure HTML van uw pagina kijkt, moet u uzelf vragen stellen zoals: 

  1. Is de HTML-structuur van mijn site zinvol, dat wil zeggen dat deze op zichzelf leesbaar en begrijpelijk is, zonder CSS (of JavaScript)? 
  2. Ben ik mijn inhoud goed aan het markeren, d.w.z..
      voor ongeordende lijsten met items, maar een
      bij het definiëren van relaties tussen items? 
    • Bedoel ik semantisch-rijke variaties in de tekst met behulp van tags zoals en waar van toepassing, in plaats van generieke tags zoals ?

Ik heb een idee: hoe zit het met het testen van dit op je eigen bestaande webpagina nu? Ga naar uw site, open de ontwikkelaarstools, vind de .css bestand uw gebruik van de site, en verwijder alle stijlregels.

Tip: Als alternatief kunt u met uitbreidingen, zoals de Web Developer-plug-in voor Chrome, eenvoudig schakelen tussen CSS-stijlen.

Moet je zien! Op mijn eigen site heb ik ruimte voor verbetering gevonden. Er zijn enkele HTML-elementen die niet essentieel zijn zonder JavaScript. Ik zou die moeten verwijderen zodat ze niet in eerste instantie aanwezig zijn in de DOM en later als JavaScript met verbeteringen toevoegen. Bovendien kunnen sommige lijstcomponenten worden aangepast en verenigd in semantiek. Maar dit gaat niet over mij, laten we er maar over beginnen jouw website.

Jouw website

Blader door uw "blote" pagina en probeer de inhoud te lezen. Is het logisch? Zijn dingen die koppen moeten zijn, gemarkeerd als kopjes? Zijn dingen die lijsten met lijsten zouden moeten zijn? Als dit niet het geval is, evalueert u uw markup opnieuw. De HTML is wat uw website vormt op het meest basale niveau. Justin Jackson heeft daar een goed voorbeeld van. Als u eenmaal een degelijke, semantische HTML hebt, kunt u er zeker van zijn dat zelfs als niets anders op uw pagina wordt geladen dan de HTML, gebruikers uw bericht nog steeds kunnen lezen en begrijpen (ook zoekmachines). 

a11y

Universeel toegankelijke content is een kern tenant van het internet en is altijd een geweldige plek om te beginnen. In 2004 zei Jeffery Veen over deze toegankelijke, semantische benadering van webdesign, 

"[Ik lever] oplossingen voor mijn klanten die veel minder complex zijn om te implementeren, veel eenvoudiger te onderhouden zijn, kosten exponentieel minder dienen, werken op meerdere browsers en apparaten, veel beter in de zoekmachine loterij, en - natuurlijk - zijn toegankelijk voor iedereen ... iedereen ... vandaag het internet gebruiken. En probeer te argumenteren met de zakelijke waarde daarvan. En daarom geef ik niet om toegankelijkheid. Want als webontwerp als een ambacht wordt beoefend en geen troost, komt toegankelijkheid gratis. "

Conclusie

Dus de volgende keer dat u de CSS van uw site aanpast met Sass en u een compileerfout maakt, kunt u de echte inhoud en structuur van uw site bekijken: de HTML. Het is misschien een van die momenten waarop een fout zich leent voor een echte kans op verrijking die anders zou zijn gemist.