Einführung Trashig.css

0
15

Es begann, wie viele Dinge tun, mit einem dummen Gespräch. In diesem Fall, ich war im Gespräch mit unseren Front-End-Technologie-Kompetenz-Direktor (aka “boss man”) Mundi Morgado.

Es ging so etwas wie dieses…

Mundi Morgado möchte ich Sie zum erstellen einer visual screen-reader.

Nathan Smith, der-was nun?

Mundi Morgado ich will eine CSS-Bibliothek, die Ihnen erlaubt, um zu sehen, die Struktur eines Dokuments. Sollte es nicht Klasse, so dass Sie gezwungen sind, den Fokus auf Semantik. Auch, stellen Sie theme-fähig.

Nathan Smith Sicher, lassen Sie mich sehen, was ich mit oben kommen kann.

Fast-forward in der Woche, und wir haben das, was wir fordern nun:

Trashig aus.css: Die Wegwerf-CSS-Bibliothek keine Klasse

Warum Einweg? Nun, es ist nicht wirklich gedacht zu sein eine vollwertige Produktion-ready-Stil-Rahmen. Eher, es ist wie Stützräder für Dokument Semantik, mit einigen Stoßstange Bahnen (denke: bowling), um Sie auf dem richtigen Weg.

Es ist Teil unserer ständigen Bemühungen bei TandemSeven zu fördern, code literacy in unserer gesamten Organisation. Je mehr UX-Designer sind von Anfang an in die Verantwortung für die Zugänglichkeit und Semantik ein Projekt, macht es Sinn, dass wir bauen würden, in einer solchen Weise, UX und Entwicklung zu mehr Zusammenarbeit.

Es gibt vier wesentliche Aspekte zu Trashig.

Trashy: “Basic”

Zuerst ist die Basis trashig.css-Datei, die für eine einigermaßen grundlegende Aussehen für die Mehrheit der gängigen HTML-Elementen. Schauen Sie sich dieses Beispiel für eine einfache Seite.

Trashy: “Boxen”

Zweitens, es ist trashig.- Boxen.css. Optisch unterscheidet sonst unsichtbare semantische Elemente, wie zum Beispiel: header, main, nav, etc. So kann man sehen, wo solche Elemente sind (oder nicht) als Seite verfasst. Hier ist eine Seite mit semantic-Boxen beschrieben.

Trashy: “Thema”

Drittens, theming möglich ist, über trashig.Thema.css. Dies ist meist nur ein Beispiel — inspiriert von PaperCSS) — wie man UI-look”, von hand gemalt,” um zu verhindern, dass Beobachter nicht zu fixiert auf das Aussehen und das Gefühl, eher als die Semantik eines Dokuments. Hier ist das Beispiel-theme in Aktion.

Trashy: “Debug”

Schließlich gibt es eine trashige.debug.css-Datei, die highlights und ruft ungültige und/oder fehlerhaftes markup. Hier ist eine Hammer-Beispiel “alles” schief läuft auf einer einzigen HTML-Seite. Dieser wurde inspiriert durch a11y.css, obwohl es abweicht, in dem, was als bemerkenswert.

Zum Beispiel, rufen wir aus “div-itis” wenn mehrere div-Element:only-child wurden geschachtelt. Wir sind auch rechthaberisch über type=”checkbox” enthalten innerhalb der <label>. Dies ist für eine maximale click-Fähigkeit innerhalb einer ansonsten Toten Leerzeichen Lücke, zwischen einer checkbox (oder radio) und Text-label.

Irgendwelche oder alle diese CSS-Dateien können einzeln verwendet werden oder in Verbindung mit einem anderen. Es gibt auch ein bookmarklet (mit der Bezeichnung “GET TRASHIG!”) auf dem Trashig-Homepage, die Sie verwenden können, um die Ergebnisse für jede Webseite.

Das bookmarklet wird aus der Ferne ziehen:

  • “desinfizieren”.css
  • trashig aus.css
  • trashig aus.- Boxen.css
  • trashig aus.debug.css

Unsere “reset” – “Desinfizieren”.css

Ein schnelles Wort auf Santitize.css: Es wurde von meinem Kollegen Jonathan Neal (Autor Normalisieren.css), als ein Weg, um ein semi-rechthaberisch CSS “reset.” Bedeutung, es stellt eine Menge von Standards, die wir uns schreiben, wie die Entwickler sowieso, also macht es für einen guten Ausgangspunkt.

Technisch gesehen

Okay, so, jetzt haben wir behandelt, das “warum” let ‘ s dig in das “wie”.

Im Grunde dreht sich alles um die Verwendung (Missbrauch?) das ::before und ::after pseudo-Elemente. Zum Beispiel, um den Namen eines block-level-tag, wir sind mit diesem CSS-Dateien.

Semantische tags (mit ::davor)

Hier ist eine abgekürzte version des trashigen.- Boxen.css-Datei, für die lapidare. Es bewirkt, dass das <section> – tag, um eine gestrichelte Grenze, und die tag-Namen angezeigt, oben Links in der Ecke.

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

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

Abschnitt::before {
background: #fff;
color: #f0f;
Inhalt: “section”;
font-family: ‘Courier’, monospace;
font-size: 1rem; /* 10px. */
letter-spacing: 0.1 rem; /* 1px. */
line-height: 1.3;
text-transform: Großbuchstaben;
position: absolute;
top: 0;
Links: 0.3 rem; /* 3px. */
}
Warnmeldungen (mit ::nach)

Ebenso, hier ist ein code-snippet aus der trashig.debug.css-Datei die Laufwerke, die die markup-Warnmeldungen. Dieses Beispiel bewirkt, dass <script> – tags angezeigt werden, die werden weiter optimiert oder müssen die Entwickler für die Aufmerksamkeit: inline-JavaScript und/oder externen src ohne async.

Im Fall von inline-JS, setzen wir die font-size und line-height auf 0, weil wir machen das element sichtbar. Wir reißen den text aus der Seite per text-indent: -99999px nur um sicherzustellen, dass es nicht zeigen, bis. Wir würden nicht wollen, dass random JS-code angezeigt, neben legit Inhalte auf der Seite.

(Bitte nicht immer tun, diese für “echte” Inhalte. Es ist nur ein hack, mkay?)

Um uns die Fehlermeldung zu zeigen, bis, obwohl, müssen wir den font-size und line-height zurück zu nicht-null-Werte, und entfernen Sie unsere text-indent. Dann, mit ein bisschen mehr absolute Positionierung, sichern wir die Nachricht sichtbar ist. Dies lässt uns sehen, inmitten der restliche Inhalt der Seite, den Aufenthaltsort zu überprüfen (per DOM-inspector) für das <script> Einfügemarke.

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

script:not([src])::nach,
script[src]:not([async])::nach,
script[src^=”http:”]::after {
background: #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. */
pointer-events: none;
position: absolute;
text-decoration: none;
text-indent: 0;
top: 100%;
white-space: nowrap;
z-index: 1;
}

Körper-script:not([src])::nach,
Körper-script[src]:not([async])::nach,
Körper-script[src^=”http:”]::after {
top: 0;
}

script:not([src])::after {
Inhalt:
“Move inline <script> – für externe *.js-Datei’
;
}

script[src]:not([async])::after {
Inhalt:
‘Betrachten [async] für <script> mit [src=”…”]’
;
}

script[src]:not([src=””]):not([async])::after {
Inhalt:
‘Betrachten [async] für <script> mit [src=”‘ attr(src) ‘”]’
;
}

script[src^=”http:”]::after {
Inhalt:
“Erwogen “https:” für <script> mit [src=”‘ attr(src) ‘”]’
;
}

Hinweis: Einige Skripte müssen geladen werden synchron. Sie würde nicht wollen Ihr “app” – code zu laden, bevor Sie Ihren “Rahmen” – code. Heck, einige inline-JS ist wahrscheinlich auch in Ordnung, vor allem, wenn man dabei einige super-speed-Optimierung für den kritischen rendering-Pfad. Diese Warnungen sind “dumm” in dem Sinne, dass Sie das match nur via CSS-Selektoren. Nehmen Sie ‘em mit einem Körnchen Salz, kann Ihre Laufleistung variieren, etc..

JS-bookmarklet

Die genannten JS-bookmarklet findet alle <link rel=”stylesheet”> – und <style> – tags in die Seite, und bewirkt, dass Sie unwirksam werden. Dies ermöglicht uns in unserem eigenen CSS zu übernehmen, so dass nur die Formatvorlagen sind diejenigen, die direkt über Trashig.

Die Magie geschieht durch festlegen rel=”stylesheet” rel=””. Wenn ein externes stylesheet wird nicht als solche identifiziert, auch wenn es zwischengespeichert, der browser wird nicht für die Stile für die Seite. Ebenso zerstören wir die Inhalte von inline <style> – tags durch festlegen der innerHTML-auf eine leere Zeichenfolge.

Dies lässt uns mit der tags selbst noch intakt ist, weil wir immer noch wollen, um zu überprüfen, dass keine <link> oder <style> – tags vorhanden sind, innerhalb von <body>.

Wir prüfen auch, dass es nicht allzu viele <style> – tags im <head>. Wir lassen Sie für einen, da es verwendet werden könnte, für den kritischen rendering-Pfad. Wenn es ein build-Prozess generiert eine Seite mit Konzern-inline-styles, dann ist es wahrscheinlich, Sie sind ausgestoßen, durch einen tag.

<a href=”javascript:(
function (d) {
var f = Array.der Prototyp.forEach;
var linkTags = d….querySelectorAll(‘[rel=’stylesheet’]’);
var styleTags = d….querySelectorAll(‘style’);

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

f.call(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….Kopf.appendChild(newLink);
}
)(document);”>
HOLEN SIE SICH TRASHIG!
</a>

Hingehen, bekommen Trashig!

Holen Sie Sich Trashig

, Die ziemlich viel abdeckt. Es ist eine einfache drop-in, um Ihnen zu helfen visualisieren Sie Ihre Dokument Semantik und debug-möglicherweise problematische-markup.

Ich habe auch festgestellt, dass es super Spaß macht. Eine schnelle klicken Sie auf das bookmarklet auf einer Seite liefert meist viele Dinge, die verbessert werden könnte.

Zum Beispiel, hier ist, was der CNN-Website sieht aus wie mit Trashigen angewendet…

P. S. Rufen Sie Sicherheit!

Wenn Sie versuchen, diese mit ‘s Website, Sie Fragen sich vielleicht, warum es nicht funktioniert. Wir waren zunächst verwirrt durch diese, auch. Es hat zu tun mit der Website-Content Security Policy (CSP). Dies kann verwendet werden, zu verbieten, CSS und/oder JavaScript von extern geladen und können whitelist sichere Domänen.

Dies kann sowohl auf der server-Ebene, oder von einem <meta> – tag im <head>.

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

Lesen Sie mehr über CSP hier.

Ich weiß, was du denkst…

Können Sie nicht einfach zerstören, dass der meta-tag mit JS?

In dem Fall , es emittiert von dem server. Auch wenn es im HTML, es zu zerstören, hat keine Auswirkung auf die tatsächlichen browser-Verhalten. Es ist gesperrt.

Okay, also…

Kannst du nicht legen Sie Ihre eigenen Sicherheits-meta-tag und Sie außer Kraft setzen?

Sie würde so denken. Aber, zum Glück, keine. Einmal CSP akzeptiert der browser für diese Seite, es kann nicht überschrieben werden. Das ist wahrscheinlich eine gute Sache, auch wenn es Ruinen unseren Spaß.

Ich nehme an, dass wäre wie den Wunsch, noch mehr Wünsche. Es ist gegen die genie-Regeln!