Införande Av Trashy.css

0
37

Det började, som så många saker att göra, med en fånig konversation. I det här fallet, jag pratade med vår Front End-Teknik Kompetens Direktör (aka “boss man”) Mundi Morgado.

Det gick ungefär så här…

Mundi Morgado jag vill att du ska bygga en visuell skärm läsaren.

Nathan Smith Som vad händer nu?

Mundi Morgado jag vill ha en CSS-bibliotek som tillåter dig att se strukturen i ett dokument. Det bör inte använda klassen så att du är tvungen att fokusera på semantik. Dessutom gör det tema-stånd.

Nathan Smith Säker, låt mig se vad jag kan komma med.

Snabbspola framåt en vecka, och vi har fått det vi nu kallar:

Trashy.css: slit och släng CSS bibliotek med ingen klass

Varför slit och släng? Tja, det är egentligen inte tänkt att vara en fullvärdig, produktionsfärdiga stil ram. Snarare, det är som stödhjul för dokument semantik, med vissa stötfångare körfält (tänk: bowling) för att hålla dig på rätt spår.

Det är en del av vårt pågående arbete på TandemSeven för att främja läs-och skrivkunnighet-kod i hela vår organisation. Som flera av våra UX-designers börjar med att dela på ansvaret för tillgänglighet och semantik i ett projekt, är det vettigt att vi skulle bygga på ett sådant sätt som gör att UX och utveckling för att bli mer samarbete.

Det finns fyra huvudsakliga aspekter att Trashy.

Trashy: “Grundläggande”

För det första är den bas trashy.css-fil, som gäller en hjälpligt grundläggande utseende och känsla för att majoriteten av vanliga HTML-element. Kolla in detta exempel på en grundläggande sida.

Trashy: “Lådor”

För det andra, det är rockig.lådor.css. Detta visuellt skiljer annars osynliga semantiska element, såsom: huvud, huvud, nav, etc. På det sättet kan man se om dessa element är (eller inte) som en webbsida är författad. Här är en sida med semantiska lådor som beskrivs.

Trashy: “Tema”

För det tredje, teman som är möjligt via trashy.temat.css. Detta är mest bara ett exempel — inspirerad av PaperCSS) — hur ANVÄNDARGRÄNSSNITTET ser “handritade” för att förhindra observatörer från att vara alltför fixerad vid utseende och känsla, snarare än semantik i ett dokument. Här är exempel på tema i handlingen.

Trashy: “Debug”

Slutligen, det är en rockig.felsöka.css-fil som pekar och ropar ogiltigt och/eller problematiska markup. Här är en knotig exempel på “allt” som går fel på en enkel HTML-sida. Detta var inspirerad av a11y.css, även om det skiljer sig i vad som anses vara anmärkningsvärt.

Till exempel, vi kallar sig “div-itis” när flera div:bara-barn har varit inkapslade i varandra. Vi är också många åsikter om type=”checkbox” som finns inuti en <label>. Detta är för maximal klicka-förmåga inom ett annars dött mellanrum mellanrum, mellan en kryssruta (eller radio) och dess text etikett.

Någon eller alla av dessa CSS-filer kan användas individuellt eller tillsammans med en annan. Det är också en bookmarklet (märkt “FÅ TRASHY!”) på Trashy startsida som du kan använda för att få resultat för en webbsida.

Bookmarklet kommer distans dra i:

  • sanera.css
  • trashy.css
  • trashy.lådor.css
  • trashy.felsöka.css

Vår “reset” – Sanera.css

En snabb ord om Santitize.css: Det var skapad av min kollega Jonathan Neal (författare Normalisera.css), som ett sätt att ha en semi-påstridig CSS “nollst.” Mening, det sätter i en hel del av den standard som vi finner oss själva skrivandet som utvecklare hur som helst, så gör det till en bra utgångspunkt.

Tekniskt sett

Okej, så nu när vi har täckt den “varför”, låt oss gräva i “hur”.

I grund och botten, allt kretsar kring att använda (missbruka?) ::före och ::after pseudo-element. Till exempel, för att visa namnet på ett block nivå tag, vi använder denna CSS.

Semantiska taggar (med hjälp av ::före)

Här är en förkortad version av trashy.lådor.css-fil, för succinctness. Det orsakar <del> – taggen för att ha en streckad gräns, och har sin tagg som heter som visas i det övre vänstra hörnet.

avsnitt {
border: 1px streckade #f0f;
display: block;
margin-bottom: 2rem; /* 20px. */
stoppning: 2rem; /* 20px. */
position: relative;
}

avsnitt > :last-child {
margin-bottom: 0;
}

avsnitt::innan {
bakgrund: #fff;
färg: #f0f;
innehåll: “avsnitt”.
font-family: “Courier”, monospace;
font-size: 1rem; /* 10px. */
letter-spacing: 0.1 rem; /* 1px. */
linje-höjd: 1,3;
text-transform: uppercase;
position: absolute;
top: 0;
vänster: 0.3 rem; /* 3px. */
}
Varningsmeddelanden (med hjälp av::)

Likaså här är ett kodavsnitt från trashy.felsöka.css-fil som driver markup varningsmeddelanden. Detta speciella exempel orsakar <script> – taggar för att kunna visas, vilket kan vara ytterligare optimerat eller behöver utvecklare uppmärksamhet: inline-JavaScript och/eller yttre utan src async.

I fall av inline JS, vi ställa in font-size och line-height 0 eftersom vi gör den del synlig. Vi ryck texten från sidan via text-indent: -99999px bara att se till att det inte dyker upp. Vi vill inte att slumpmässiga JS-kod som visas tillsammans med en bluff innehållet på sidan.

(Vänligen inte någonsin att göra detta för “verkliga” innehållet. Det är bara ett hack, mkay?)

För att få våra felmeddelande att visa upp om vi måste ställa in font-size och line-height tillbaka till icke-noll-värden, och ta bort vår text-indent. Sedan, med lite mer absolut positionering, vi säkerställa att meddelandet är synliga. Detta låter oss se, mitt i resten av innehållet på sidan, var att kontrollera (via DOM inspector) <script> insättningspunkten.

manus:inte([src]),
manus[src]:inte([asynkron]),
manus[src^=”http: den”] {
färg: transparent;
display: block;
font-size: 0;
höjd: 2rem; /* 20px. */
line-height: 0;
margin-bottom: 2rem; /* 20px. */
position: relative;
text-indent: -99999px;
width: 100%;
}

manus:inte([src])::efter,
manus[src]:inte([asynkron])::efter,
manus[src^=”http: den”]::efter {
bakgrund: #f00;
color: #fff;
display: inline-block;
font-family: Verdana, sans-serif;
font-size: 1.1 rem; /* 11px. */
font-weight: normal;
left: 0;
line-height: 1.5;
padding-left: 0.5 rem; /* 5px. */
padding-right: 0.5 rem; /* 5px. */
pekare-händelser: none;
position: absolute;
text-decoration: none;
text-indent: 0;
topp: 100%;
white-space: nowrap;
z-index: 1;
}

kroppen manus:inte([src])::efter,
kroppen script[src]:inte([asynkron])::efter,
kroppen script[src^=”http: den”]::efter {
top: 0;
}

manus:inte([src])::efter {
innehåll:
“Flytta inline <script> – extern *.js-fil’
;
}

manus[src]:inte([asynkron])::efter {
innehåll:
“Överväga [asynkron] <script> med [src=”…”]’
;
}

manus[src]:inte([src=”det”]):inte([asynkron])::efter {
innehåll:
“Överväga [asynkron] <script> med [src=”‘ o(src) ‘”]’
;
}

manus[src^=”http: den”]::efter {
innehåll:
“Överväga “https:” <script> med [src=”‘ o(src) ‘”]’
;
}

Obs: Vissa skript behöver laddas synkront. Du vill inte att din “app” kod för att ladda innan din “ram” som kod. Heck, några inline JS är nog bra också, speciellt om du gör några super speed optimering för den kritiska rendering väg. Dessa varningar är “dumb” i den meningen att de matchar endast via CSS-selektorer. Ta dem med en nypa salt, din lycka kan variera, etc.

JS bookmarklet

De ovan nämnda JS bookmarklet hittar alla <link rel=”stylesheet”> <style> – taggar i sidan, och orsakar dem att vara ineffektiva. Detta tillåter oss att lägga till i vår egen CSS för att ta över, så att endast stilar som tillämpas är de som tillhandahålls direkt via Trashy.

Det magiska sker genom att sätta rel=”stylesheet” rel=””. Om en extern stilmall är inte identifierade som sådana, även om det är cachade, kommer webbläsaren att inte tillämpa dess format på sidan. På samma sätt måste vi förstöra innehållet i någon inline <style> – taggarna genom att ställa innerHTML till en tom sträng.

Detta lämnar oss med taggarna själva fortfarande är intakt, eftersom vi fortfarande vill att bekräfta att inga <länk> eller <style> – taggar finns inom <body>.

Vi kontrollerar också att det inte finns alltför många <style> – taggar som används i <head>. Vi tillåter för en, eftersom det kan användas för kritisk rendering väg. Om det är en byggprocessen för att skapa en sida med koncernens inline styles, då är det troligt att de är som släpps ut genom en enda tagg.

<a href=”javascript:(
funktion (d) {
var f = Array.prototyp.forEach;
var linkTags = d.querySelectorAll(‘[rel=’stylesheet’]’);
var styleTags = d.querySelectorAll (“stil”);

f.samtal(linkTags, function (x) {
x.rel = “;
});

f.samtal(styleTags, function (x) {
x.innerHTML = “;
});

var newLink = d.createElement (“link”);

newLink.rel = ‘stylesheet’;

newLink.href =
‘https://t7.github.io/trashy.css/css/bookmarklet.css’;

d.huvud.appendChild(newLink);
}
)(dokument);”>
FÅ TRASHY!
</a>

Gå ut, få Trashy!

Få Trashy

Som ganska mycket täcker den. Det är en enkel drop-in för att hjälpa dig att visualisera dina dokument semantik och felsöka möjligen problematiskt markup.

Jag har också funnit det vara super kul att använda. Ett snabbt klick på bookmarklet på en viss plats oftast ger massor av saker som skulle kunna förbättras.

Till exempel, här är vad CNN: s webbplats ser ut med Rockig tillämpas…

P. S. Ring säkerhet!

Om du försöker detta med ” s webbplats, du kanske undrar varför det inte fungerar. Vi var först förbryllad av detta också. Det har att göra med webbplatsens Innehåll Security Policy (CSP). Detta kan användas för att ta bort CSS och/eller JavaScript laddas externt, och kan vitlista säkra domäner.

Detta kan göras antingen på servern nivå, eller av en <meta> – taggen i <head>.

<meta http-equiv=”Content-Säkerhet-Politik” content=”…” />

Läs mer om CSP här.

Jag vet vad du tänker…

Kan inte du förstör bara att meta-tagg med JS?

I fall av , det är som släpps ut från servern. Även om det var i HTML-koden, förstöra det har ingen effekt på den faktiska webbläsaren beteende. Det är låst.

Okej, så…

Kan inte du sätta in din egen säkerhet meta tag och överskrida den?

Du skulle tänka så. Men, tack och lov, nej. När en CSP godkänts av webbläsare för att sidan inte kan åsidosättas. Det är nog en bra sak, även om det förstör våra roliga.

Jag antar att det skulle vara som att önska att fler önskningar. Det är mot anden regler!