De Invoering Van Trashy.css

0
17

Het begon, zoals veel dingen doen, met een dom gesprek. In dit geval, ik was aan het praten met onze Front-End Technologie Competentie-Directeur (aka “baas”) Mundi Morgado.

Het ging ongeveer zo…

Mundi Morgado ik wil dat je het bouwen van een visual screen reader.

Nathan Smith, Die wat nu?

Mundi Morgado ik wil een CSS-bibliotheek die u toelaat om te zien de structuur van een document. Het mogen geen gebruik maken van de klas, zodat je gedwongen wordt om zich te concentreren op semantiek. Zorg er ook voor dat thema-staat.

Nathan Smith Zeker, laat me zien wat ik kan verzinnen.

Snel een week, en we hebben wat wij nu noemen:

Trashy.css: De wegwerp CSS bibliotheek met geen les

Waarom wegwerp? Nou, het is niet echt bedoeld om te worden van een volwaardige, productie-klaar stijl kader. Integendeel, het is zoals zijwieltjes voor document semantiek, met een aantal bumper rijstroken (denk aan: bowling) om u te houden op het juiste spoor.

Het is onderdeel van onze voortdurende inspanningen op TandemSeven te bevorderen code geletterdheid in onze organisatie. Als u meer van onze UX ontwerpers in het begin delen de verantwoordelijkheid voor de toegankelijkheid en de semantiek van een project, is het logisch dat we bouwen op een manier die het mogelijk maakt UX en de ontwikkeling naar meer samenwerking.

Er zijn vier belangrijke aspecten te Trashy.

Trashy: “Basic”

De eerste is de basis trashy.css-bestand dat van toepassing is in een passably basic look en feel voor de meerderheid van de gewone HTML-elementen. Bekijk dit voorbeeld van een pagina.

Trashy: “Dozen”

Ten tweede, er is flut.dozen.css. Dit visueel onderscheidt anders onzichtbaar semantische elementen, zoals: kop -, hoofd -, nav, enz. Op die manier kan men zien waar deze elementen zijn (of niet) als een pagina wordt gemaakt. Hier is een pagina met semantische vakken beschreven.

Trashy: “Thema”

Ten derde, thematisering is mogelijk via trashy.- thema.css. Dit is meestal slechts een voorbeeld en geïnspireerd door PaperCSS) — van hoe om UI-look “met de hand getekend,” om te voorkomen dat waarnemers uit te gefixeerd op het uiterlijk en de uitstraling, eerder dan de semantiek van een document. Hier is het voorbeeld thema in actie.

Trashy: “Debug”

Tenslotte is er een trashy.debug.css-bestand dat wijst en roept: ongeldige en/of problematisch markup. Hier is een knoestige voorbeeld van “alles” mis gaat op een enkele HTML-pagina. Dit werd geïnspireerd door a11y.css, maar het verschilt in wat beschouwd wordt als opmerkelijk.

Bijvoorbeeld, roepen we “div-itis” wanneer meerdere div:alleen-kind zijn genest in elkaar. We zijn ook een uitgesproken mening over type=”checkbox” wordt opgenomen in een <label>. Dit is voor een maximale klik-vermogen binnen een anders dood witruimte kloof, tussen een checkbox (of radio) en de tekstuele label.

Een of alle van deze CSS-bestanden kunnen worden toegepast, afzonderlijk of in combinatie met elkaar. Er is ook een bookmarklet (met het opschrift “TRASHY!”) op de Trashy home-page kunt u gebruik maken van de resultaten voor elke webpagina.

De bookmarklet op afstand trek in:

  • sanitize.css
  • trashy.css
  • trashy.dozen.css
  • trashy.debug.css

Onze “reset” – Ontsmetten.css

Een snelle word op Santitize.css: Het werd gemaakt door mijn collega Jonathan Neal (auteur van Normaliseren.css), als een manier om een semi-eigenwijs CSS “reset.” Betekenis, het brengt in veel van de instellingen die we vinden onszelf schrijven als ontwikkelaars toch, dus het is een goed uitgangspunt.

Technisch gesproken

Okay, dus die wij hebben behandeld het “waarom” laten we dieper in op het ‘hoe’.

Kortom, het draait rond het gebruik (misbruik?) de ::before en ::after pseudo-elementen. Bijvoorbeeld, om de naam van een block level tag, hebben we deze CSS.

Semantische tags (met ::voor)

Hier is een verkorte versie van de trashy.dozen.css-bestand, voor succinctness. Het zorgt ervoor dat de sectie <sectie> – tag aan een gestippelde rand, en een tag met de naam die wordt weergegeven in de linker bovenhoek.

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

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

sectie::before {
background: #fff;
color: #f0f;
inhoud: “de rubriek”;
font-family: “Courier”, monospace;
font-size: 1rem; /* 10px. */
letter-spacing: 0.1 rem; /* 1px. */
line-height: 1.3;
text-transform: uppercase;
position: absolute;
top: 0;
links: 0.3 rem; /* 3px. */
}
Waarschuwing berichten (met ::na)

Ook hier is een fragment van de code van de trashy.debug.css-bestand dat drijft de markup waarschuwing berichten. Dit specifieke voorbeeld wordt <script> – tags worden weergegeven, die verder kan worden geoptimaliseerd of moet de ontwikkelaar de aandacht: inline JavaScript en/of externe src zonder async.

In het geval van inline-JS, stellen we de font-grootte en hoogte aan 0, want we maken het element zichtbaar. We ruk de tekst uit de pagina via text-indent: -99999px gewoon om zeker te zijn is er niet te zien. We zouden niet willen dat de random JS code weergegeven naast legit de inhoud van de pagina.

(Gelieve niet dit ooit doen voor de “echte” inhoud. Het is gewoon een hack, mkay?)

Om onze foutbericht te zien wel, we hebben om de lettertype-grootte en line-height terug tot nul waarden, en verwijderen ons text-indent. Dan, met een beetje meer absolute positionering, wij zorgen voor het bericht zichtbaar is. Dit laat ons zien, te midden van de rest van de pagina-inhoud, verblijfplaats om te controleren (via de DOM inspector) voor de <script> invoegpositie.

script:not([src]),
script[src]: ([async]),
script[src^=”http:”] {
kleur: transparant;
display: block;
font-size: 0;
hoogte: 2rem; /* 20px. */
line-height: 0;
margin-bottom: 2rem; /* 20px. */
position: relative;
text-indent: -99999px;
breedte: 100%;
}

script:not([src])::na,
script[src]: ([async])::na,
script[src^=”http:”]::after {
achtergrond: #f00;
color: #fff;
display: inline-block;
font-family: Verdana, sans-serif;
font-size: 1.1 rem; /* 11px. */
font-weight: normal;
links: 0;
line-height: 1.5;
padding-left: 0.5 rem; /* 5px. */
padding-right: 0.5 rem; /* 5px. */
pointer-evenementen: none;
position: absolute;
text-decoration: none;
text-indent: 0;
top: 100%;
white-space: nowrap;
z-index: 1;
}

lichaam script:not([src])::na,
lichaam script[src]: ([async])::na,
lichaam script[src^=”http:”]::after {
top: 0;
}

script:not([src])::after {
inhoud:
‘Move inline <script> extern *.js-bestand’
;
}

script[src]: ([async])::after {
inhoud:
“Acht (async] <script> met de [src=”…”]’
;
}

script[src]: ([src=””]):not([async])::after {
inhoud:
“Acht (async] <script> met de [src=”‘ attr(src) ‘”]’
;
}

script[src^=”http:”]::after {
inhoud:
‘Denk maar aan “https:” voor <script> met de [src=”‘ attr(src) ‘”]’
;
}

Opmerking: Sommige scripts hoeft te worden geladen synchroon. U wilt niet dat uw “app” code laden voordat je “kader” – code. Heck, inline JS is waarschijnlijk ook goed, vooral als je doet wat super speed-optimalisatie voor de kritische rendering pad. Deze waarschuwingen zijn “domme” in de zin dat ze overeenkomen met alleen via CSS selectors. Neem ze met een korrel zout, de kilometerstand kan afwijken, enz.

JS bookmarklet

De genoemde JS bookmarklet vindt alle <link rel=”stylesheet”> en de <style> – tags in de pagina, en zorgt ervoor dat ze niet te werken. Dit stelt ons in staat om toe te voegen in onze eigen CSS-over te nemen, zodat alleen de stijlen die worden toegepast zijn die welke rechtstreeks via Trashy.

De magie wordt bereikt door het instellen van rel=”stylesheet” rel=””. Als een externe stylesheet is niet als zodanig geïdentificeerd, zelfs als het is opgeslagen, zal de browser niet van toepassing zijn stijlen van de pagina. Ook wij vernietigen van de inhoud van een inline <style> – tags door het instellen van de innerHTML is een lege tekenreeks.

Dit laat ons achter met de tags zelf nog intact, omdat we nog wilt valideren die geen <link> of <style> – tags aanwezig zijn binnen de <body>.

We controleren ook dat er niet te veel <style> – tags in de <head>. Laten We voor één, omdat het zou kunnen worden gebruikt voor de essentiële rendering pad. Als er een proces op te bouwen voor het genereren van een pagina met een geconsolideerde inline stijlen, dan is het waarschijnlijk dat ze worden uitgezonden door middel van een enkele tag.

<a href=”javascript:(
functie (d) {
var f = Array.prototype.forEach;
var linkTags = d.querySelectorAll(‘[rel=’stylesheet’]’);
var styleTags = d.querySelectorAll(‘stijl’);

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

f.bel(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.hoofd.appendChild(newLink);
}
(document);”>
VOOR TRASHY!
</een>

Uitgaan, krijgen Trashy!

Voor Trashy

Dat vrij veel dekt. Het is een eenvoudige drop-in om u te helpen bij het visualiseren van uw document semantiek en debuggen mogelijk problematische markup.

Ik vond het ook super leuk om te gebruiken. Een snelle klik op de bookmarklet op een site leidt meestal tot veel van de dingen die verbeterd zou kunnen worden.

Bijvoorbeeld, hier is wat CNN ‘ s site ziet eruit als Trashy toegepast…

P. S. Oproep veiligheid!

Als je dit probeert te ‘s site, je kunt je afvragen waarom het niet werkt. We waren in eerste instantie verbijsterd door deze, ook. Het heeft te maken met de Inhoud van de site Security Policy (CSP). Dit kan gebruikt worden om te verbieden CSS en/of JavaScript worden geladen extern, en kan de witte lijst van veilige domeinen.

Dit kan worden ingesteld op de server, of door een <meta> – tag in de <head>.

<meta http-equiv=”Content-Security-Beleid” content=”…” />

Lees meer over CSP hier.

Ik weet wat je denkt…

Kan je niet gewoon vernietigen die meta-tag met de JS?

In het geval van , het is uitgezonden door de server. Zelfs als het ware in de HTML-code, te vernietigen, het heeft geen effect op het feitelijke gedrag browser. Het is vergrendeld.

Oke, dus…

Kan je niet voeg je eigen veiligheid meta-tag en deze overschrijven?

Je zou denken van wel. Maar, gelukkig, niet. Zodra een CSP is geaccepteerd door de browser de pagina, het kan niet worden genegeerd. Dat is waarschijnlijk een goede zaak, ook al ruïnes ons plezier.

Ik veronderstel dat dat zou zijn als die voor meer wensen. Het is tegen de geest regels!