Innføring Trashy.css

0
14

Den begynte, så mange ting å gjøre, med en spøkefull samtale. I dette tilfellet, var jeg snakker med vår Front-End Teknologi Kompetanse Styremedlem (aka “sjefen er mann”) Mundi Morgado.

Det gikk noe sånt som dette…

Mundi Morgado jeg vil at du skal bygge en visuell skjermleser.

Nathan Smith, Som hva nå?

Mundi Morgado jeg vil ha en CSS-bibliotek som gir deg mulighet til å se strukturen i et dokument. Det bør ikke bruke klassen, slik at du blir tvunget til å fokusere på semantikk. Også, gjør det tema-stand.

Nathan Smith Sikker, la meg se hva jeg kan komme opp med.

Spole frem en uke, og vi har fått det vi nå kaller:

Trashy.css: bruk-og-kast CSS bibliotek med ikke-klasse

Hvorfor bruk-og-kast? Vel, det er egentlig ikke ment å være en fullverdig, produksjon-klar stil rammeverk. Snarere er det som trening hjul for dokument semantikk, med noen støtfanger kjørefelt (tenk: bowling) for å holde deg på rett spor.

Det er en del av vår pågående innsats på TandemSeven å fremme kode literacy i hele vår organisasjon. Som flere av våre UX designere er i ferd med å dele ansvar for tilgjengelighet og semantikk av et prosjekt, er det fornuftig at vi ville bygge på en slik måte som gjør at UX og utvikling for å være mer praktiske.

Det er fire hovedgrunner til Trashy.

Trashy: “Basic”

Først er base trashy.css-fil, som gjelder en passably grunnleggende utseende til de fleste vanlige HTML-elementer. Sjekk ut dette eksempel på en grunnleggende side.

Trashy: “Bokser”

For det andre, det er trashy.boksene.css. Dette visuelt skiller ellers usynlige semantiske elementer, som for eksempel: topp, main, nav, etc. På den måten kan man se hvor disse elementene er (eller ikke er) som siden blir skrevet. Her er en side med semantisk bokser som er skissert.

Trashy: “Tema”

For det tredje, tematisere er mulig via trashy.tema.css. Dette er for det meste bare et eksempel — inspirert av PaperCSS) — hvordan lage UI look “tegnet for hånd,” for å hindre at observatører fra å være altfor fiksert på utseende og preg, heller enn semantikk i et dokument. Her er eksempel på tema i aksjon.

Trashy: “Debug”

Til slutt, det er en trashy.debug.css-filen som fremhever og roper ugyldig og/eller problematisk markup. Her er et vrient eksempel på “alt” går galt på en enkelt HTML-side. Dette var inspirert av a11y.css, selv om det avviker i hva som regnes som bemerkelsesverdig.

For eksempel, kaller vi ut “div-itis” når flere div:bare-barn har blitt nestet i en annen. Vi er også sta om type=”checkbox” som finnes inni en <label>. Dette er for maksimum klikk-evne i en ellers døde mellomrom gap, mellom en boks (eller radio) og dens tekstlige etiketten.

Noen eller alle av disse CSS-filer kan brukes individuelt eller sammen med en annen. Det er også en bookmarklet (merket “FÅ TRASHY!”) på den Trashy startsiden du kan bruke for å få resultater for hvilken som helst nettside.

Bookmarklet vil eksternt trekk i:

  • sanitize.css
  • trashy.css
  • trashy.boksene.css
  • trashy.debug.css

Vår “reset” – Sanitize.css

En rask ord på Santitize.css: Det ble skapt av min kollega Jonathan Neal (forfatter av Normalisere.css), som en måte å har en semi-sta CSS “reset.” Mening, det setter i en rekke standarder som vi befinner oss skriftlig så utviklere uansett, så det gjør et godt utgangspunkt.

Teknisk sett

Okay, så nå som vi har dekket “hvorfor,” la oss grave i “hvordan.”

I utgangspunktet, det hele dreier seg rundt ved hjelp av (misbruker?) ::før og ::etter pseudo-elementer. For eksempel, for å vise navnet på en blokk nivå tag, vi bruker dette CSS.

Semantiske koder (bruker ::før)

Her er en forkortet versjon av trashy.boksene.css-fil, for succinctness. Det fører til at <section> – tag for å ha en stiplet ramme, og å ha sin tag som heter vises øverst i venstre hjørne.

section {
border: 1px stiplede #f0f;
display: block;
margin-bottom: 2rem; /* 20 piksler. */
polstring: 2rem; /* 20 piksler. */
position: relative;
}

section > :siste-barn {
margin-bottom: 0;
}

seksjon::før {
background: #fff;
color: #f0f;
innhold:”§”;
font-family: “Courier”, monospace;
font-size: 1rem; /* 10px. */
brev-avstand: 0.1 rem; /* 1px. */
line-height: 1.3;
text-transform: uppercase;
position: absolute;
øverst: 0;
venstre: 0.3 rem; /* 3px. */
}
Advarsel-meldinger (via ::etter)

Likeledes, her er et utdrag av kode fra trashy.debug.css-filen som driver markup advarsler. Dette eksempelet fører til <script> – tag-er som skal vises, som kan bli ytterligere optimalisert eller trenger utvikleren oppmerksomhet: inline JavaScript og/eller ekstern kilde uten asynkron.

I tilfelle av inline JS, vi angi skrift-størrelse og line-height til 0 fordi vi gjør elementet synlig. Vi yank teksten av siden via tekst-strekpunkt: -99999px bare å sørge for at det ikke dukker opp. Vi ville ikke ha det tilfeldig JS-koden vises sammen med legit innhold på siden.

(Vennligst ikke noen gang vil gjøre dette for “ekte” innhold. Det er bare en hack, mkay?)

For å få våre feilmelding til å dukke opp selv om vi har å angi skrift-størrelse og line-height tilbake til ikke-null-verdier, og fjern vår tekst-innrykk. Så, med litt mer absolutt posisjonering, vi sørger for at meldingen er synlig. Dette lar oss se, blant resten av innholdet på siden, hvor du å sjekke (via DOM inspector) for <script> innsettingspunktet.

manus:ikke([kilde]),
script[src]:ikke([asynkron]),
script[src^=”http:”] {
farge: transparent;
display: block;
font-size: 0;
høyde: 2rem; /* 20 piksler. */
line-height: 0;
margin-bottom: 2rem; /* 20 piksler. */
position: relative;
tekst-strekpunkt: -99999px;
bredde: 100%;
}

manus:ikke([kilde]):): etter at,
script[src]:ikke([asynkron]):): etter at,
script[src^=”http:”]::etter {
bakgrunn: #f00;
color: #fff;
display: inline-block;
font-family: Verdana, sans-serif;
font-size: 1.1 rem; /* 11px. */
font-weight: normal;
venstre: 0;
line-height: 1.5;
padding-left: 0.5 rem; /* 5px. */
padding-right: 0.5 rem; /* 5px. */
peker-aktiviteter: ingen;
position: absolute;
text-decoration: none;
tekst-innrykk: 0;
øverst: 100%;
white-space: nowrap;
z-index: 1;
}

kroppen manus:ikke([kilde]):): etter at,
kroppen skript[src]:ikke([asynkron]):): etter at,
kroppen skript[src^=”http:”]::etter {
øverst: 0;
}

manus:ikke([kilde])::etter {
innhold:
‘Move-inline <script> til eksterne *.js-fil”
;
}

script[src]:ikke([asynkron])::etter {
innhold:
‘Tenk [asynkron] for <script> [src=”…”]’
;
}

script[src]:ikke([src=”det”]): ([asynkron])::etter {
innhold:
‘Tenk [asynkron] for <script> [src=”‘ attr(src) ‘”]’
;
}

script[src^=”http:”]::etter {
innhold:
‘Tenk “https:” for <script> [src=”‘ attr(src) ‘”]’
;
}

Merk: Noen skript trenger å lastes inn synkront. Du ville ikke ønsker “app” – koden inn før din “framework” – koden. Pokker, noen inline JS er sikkert bra også, spesielt hvis du gjør noen super speed optimalisering for kritisk gjengivelse av banen. Disse advarslene er “dumme” i den forstand at de passer bare via CSS-velgere. Ta dem med en klype salt, din kjørelengde kan variere, etc.

JS bookmarklet

De nevnte JS bookmarklet finner alle <link rel=”stylesheet”> og <style> – kodene på siden, og får dem til å bli ineffektiv. Dette gir oss muligheten til å legge til i vår egen CSS til å ta over, slik at den bare stiler som er brukt er de som følger direkte via Trashy.

Magien er oppnådd ved å sette rel=”stylesheet” rel=””. Hvis et eksternt stilark er ikke identifisert som sådan, selv om det er bufret, og nettleseren vil ikke søke sin stiler til side. På samme måte kan vi ødelegge innholdet av inline <style> – kodene ved å sette innerHTML til en tom streng.

Dette etterlater oss med taggene fortsatt intakt, fordi vi fortsatt ønsker å validere at ingen <link> eller <style> – kodene er til stede innenfor <body>.

Vi kontrollerer også at det ikke er for mange <style> – kodene som brukes i <head>. Vi tillater for en, siden det kan brukes for kritisk gjengivelse av banen. Hvis det er en bygge-prosessen for å generere en side med konsoliderte innebygde stiler, så det er sannsynlig at de blir slippes ut gjennom en enkelt kode.

<a href=”javascript:(
funksjon (d) {
var f = Array.prototypen.forEach;
var linkTags = d.querySelectorAll(‘[rel=’stilark’]’);
var styleTags = d.querySelectorAll (“style”);

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

f.ring(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.hodet.appendChild(newLink);
}
)(document);”>
FÅ TRASHY!
</a>

Gå tilbake, få Trashy!

Få Trashy

Som ganske mye dekker det. Det er en enkel drop-in for å hjelpe deg med å visualisere dine dokument semantikk og debug muligens problematisk markup.

Jeg har også funnet det å være super morsom å bruke. Et raskt klikk på bookmarklet på et gitt område resulterer vanligvis i massevis av ting som kan bli bedre på.

For eksempel, her er hva CNN ‘ s nettsted ser ut som med Trashy brukt…

P. S. Samtale sikkerhet!

Hvis du prøver dette med ‘s nettsted, du lurer kanskje på hvorfor det ikke fungerer. Vi var i utgangspunktet forvirret av dette, også. Det har å gjøre med Innholdet på nettstedet sikkerhetspolicy (CSP). Dette kan brukes til å forby CSS) og/eller JavaScript fra å bli lastet eksternt, og kan godkjenne trygt domener.

Dette kan gjøres enten på server nivå, eller ved en <meta> – koden i <head>.

<meta http-equiv=”Content-Sikkerhet-Policy” content=”…” />

Les mer om CSP her.

Jeg vet hva du tenker…

Kan ikke du bare ødelegge det meta tag med JS?

I tilfelle av , at det er ut fra server. Selv om det var i HTML, ødelegger det har ingen effekt på den faktiske nettleser atferd. Det er låst.

Okay, så…

Kan ikke du sette inn din egen sikkerhet meta tag og overstyre det?

Du skulle tro det. Men, heldigvis, ingen. Når en CSP blitt akseptert av nettleseren for at denne siden, det kan ikke overstyres. Det er trolig en god ting, selv om det ødelegger vår moro.

Jeg antar at det ville være som å ønske mer ønsker. Det er i mot ånden regler!