Undress att Impress; Kontrollera dina webbplatser utan CSS

HTML är kärnan på webben. Ibland, i strävan att få saker att se bra ut med CSS, glömmer vi det. Om du någonsin har använt Sass (eller en CSS-kompilator i allmänhet) har du antagligen sett din webbplatss stilbrytning på grund av ett kompileringsfel. Men innan du rusar för att åtgärda det fel du just introducerade, ta det här som ett tillfälle att analysera och förbättra kärnan på din webbplats: HTML.

"Misslyckande är helt enkelt möjligheten att börja igen, den här gången mer intelligent." - Henry Ford

Normalt är jag inte en för motivationsklichéer. Att göra misslyckande till en möjlighet till framgång kan dock vara sant när du arbetar med Sass (eller någon CSS-kompilator). Bär med mig och jag ska förklara.

Låt oss börja med ett fel

Om du har skrivit CSS med Sass har du utan tvekan sett ett kompileringsfel. I kommandoraden ser det ut som om det här:

Syntaxfel: Ogiltig CSS efter ".module": förväntat "", var ""

Ibland kan du inte fånga det här felet på kommandoraden. Dock kommer du utan tvekan att fånga felet när du växlar till webbläsaren eftersom allt visas brutet!

Din första reaktion kan vara att omedelbart byta tillbaka till din textredigerare, åtgärda det syntaxfel du just introducerade och se till att allt går tillbaka till det normala. Men håll på en sekund! Detta kan vara en av dessa "sväng fel i en möjlighet" stunder.

Sassbrytning kan vara en utmärkt möjlighet att se din webbplats i naken, helt avklädd. Ingen styling, bara ren, otydlig HTML, essensen av webben vid kärnan. Du ser, när webbläsaren gör en förfrågan blir det vanligtvis ett enda .html fil-rent hyptertext-och det är det. Allt annat (dvs CSS och Javascript) är en förbättring. Som Jeremy Keith säger,  

"Varje rad CSS du skriver är ett förslag. Du dikterar inte hur HTML ska göras. Du föreslår hur HTML ska göras. Jag tycker att det är en mycket befriande och bemyndigande idé. " 

CSS-stilregler är några av de första förbättringarna du tillämpar på ett HTML-dokument och fungerar som förslag, inte kommandon, för hur sidan ska se ut. Att se de här stilerna kan vara ett tillfälle att stoppa och analysera kärnan på din webbsida - HTML-filen och förbättra den om det behövs. HTML är ett långsiktigt format som har funnits länge. Inte bara fungerar den första webbplatsen fortfarande, det är också effektivt! 

Som Ian Yates sa, 

"Alla webbplatser är mottagliga som standard, tills vi börjar lägga till stilar och bryta dem."

När du tittar på ren HTML på din sida, fråga dig själv frågor som: 

  1. Ger min webbplats HTML-struktur mening, det vill säga är det läsbart och förståeligt på egen hand, utan någon CSS (eller JavaScript)? 
  2. Markerar jag ordentligt mitt innehåll, dvs.
      för oorderade listor med varor men a
      när man definierar relationer mellan objekt? 
    • Betecknar jag semantiskt rika variationer i texten med hjälp av taggar som och i förekommande fall, snarare än generiska taggar som ?

Jag har en idé: Vad sägs om att du testa detta på din egen existerande webbsida just nu? Gå till din webbplats, öppna utvecklingsverktygen, hitta .css filen använder webbplatsen och ta bort alla stilregler.

Tips: Alternativt kan tillägg som Web Developer-plugin för Chrome göra det enkelt för dig att byta CSS-format.

Titta på det där! På min egen sida har jag hittat utrymme för förbättring. Det finns några HTML-element som inte är nödvändiga utan JavaScript. Jag borde ta bort dem så att de inte initialt finns i DOM och lägg till dem senare med JavaScript som förbättringar. Dessutom kan några av listkomponenterna tweaked och förenas i semantik. Men det handlar inte om mig, låt oss komma tillbaka till att prata om din hemsida.

Din hemsida

Bläddra ner genom din "nakna" sida och försök läsa innehållet. Verkar det vettigt? Är saker som ska vara rubriker markerade som rubriker? Är saker som ska vara listor listor? Om inte, utvärdera din markering igen. HTML är vad som utgör din webbplats på sin mest grundläggande nivå. Justin Jackson har ett bra exempel på detta. När du väl har någon solid, semantisk HTML som börjar med kan du vara säker på att även om inget annat på din sida laddar men HTML, kan användarna fortfarande läsa och förstå ditt meddelande (även sökmotorer). 

a11y

Universellt tillgänglig innehåll är en kärnhyresgäst på webben och är alltid ett bra ställe att börja. Tala 2004 om detta tillgängliga, semantiska tillvägagångssätt för webbdesign, uttalade Jeffery Veen, 

"[Jag levererar] lösningar till mina klienter som är mycket mindre komplexa att implementera, är mycket enklare att behålla, kostnader exponentiellt mindre att tjäna, arbetar på flera webbläsare och enheter, gör det bättre i sökmotorns lotteri och - självklart - är tillgängliga för alla ... alla ... med hjälp av webben idag. Och försök att argumentera med det affärsmässiga värdet av det. Och det är därför jag bryr mig inte om tillgänglighet. För när webbdesign utövas som ett hantverk, och inte en tröst, kommer tillgängligheten gratis. "

Slutsats

Så nästa gång du anpassar webbplatsens CSS med Sass och du får ett kompileringsfel, ta det som ett tillfälle att undersöka det verkliga innehållet och strukturen på din webbplats: HTML. Det kan vara en av de ögonblick där ett misslyckande slutar låna sig till ett verkligt tillfälle att berika som annars skulle ha missat.