Ich finde es ziemlich cool zu sehen, wie Google Repositories mit interessanten Web Components veröffentlicht. Es zeigt die Möglichkeiten cooler neuer Web-Features und ermöglicht es ihnen, diese so auszuliefern, dass sie mit reinem Webstandards kompatibel sind.
Hier ist einer: <two-up>
Ich wollte es ausprobieren, also habe ich das Beispielskript two-up-min.js in einem Pen verlinkt und das Element alleine verwendet, um zu sehen, wie es funktioniert. Sie legen das Styling der Komponente über benutzerdefinierte Eigenschaften frei, was meiner Meinung nach ein verdammt guter Anwendungsfall dafür ist.
<two-up&rt; von Chris Coyier (@chriscoyier) auf CodePen.
Der Code ist so hässlich, ich hoffe, ich muss nie wieder Code wie diesen für eine echte Live-Produktionsseite schreiben oder warten.
Ausführen?
Ist das hässlich für Sie?
Entschuldigung, ich hätte spezifischer sein sollen. Die Verwendung ist großartig, ich bin damit sehr zufrieden. Es ist der Implementierungscode selbst, insbesondere two-up.ts.
Ich habe mich so daran gewöhnt, JSX für Vue und React zu verwenden, und Angular (wo es wenig DOM-Manipulationscode gibt), dass dieser Code mir jetzt fremd vorkommt. Kinder an ein Element anhängen, Attribute setzen und entfernen, Elemente in das DOM einfügen,
addEventListeneraufrufen und wahrscheinlichremoveEventListenerscheint mir jetzt so umständlich. Ich schätze, ich bin von den heutigen Frameworks verwöhnt.Hmm, funktioniert in Edge nichts... In Chrome aber nett.
Ich frage mich, wie viel länger? Sagt Microsoft, wann der Chromium-Wechsel erfolgen wird?
https://github.com/GoogleChromeLabs/two-up#attributes
„Boolesches Attribut, das die Edge-Unterstützung aktiviert.“
Nicht. Tastatur. Freundlich.
#a11y #EnuffSaid
Meinen Sie, Web Components sind nicht tastaturfreundlich? Ich bin zu 99 % sicher, dass das nicht stimmt. Ich bin ziemlich sicher, dass man bei allem vorsichtig sein muss. Marcy Sutton hat eine Präsentation über Web Components und Barrierefreiheit.
Oder meinen Sie diese spezielle Demo? Wenn ja, ist das ein ziemlich interessantes Szenario. Ich frage mich, wie ein Schieberegler wie dieser funktionieren würde. Vielleicht ein Fokus-Stil und dann Pfeiltasten nach links und rechts zum Bewegen? Oder überschreibt das andere Barrierefreiheitssteuerungen? Wie auch immer, die Sache ist Open Source, daher bin ich sicher, dass sie entweder Commits zur Hilfe oder Diskussionen in den Issues begrüßen würden.
Hallo Chris – ja, ich meinte diese spezielle Komponente.
Pfeiltasten würden funktionieren. Aber der Einfachheit halber vielleicht so binden, dass eine einzige Interaktion in jeder Richtung das gesamte Bild freigibt. Und wahrscheinlich ist es ratsam, diese Funktionalität für Screenreader mit
aria-hidden: truezu deaktivieren?Eine tolle Idee, aber sie sieht wirklich hässlich aus. Die Schatten lassen sie „unscharf“ aussehen und aus irgendeinem Grund erstreckt sich der Balken einige Pixel unterhalb der Fotos und egal wie sehr ich mich bemühe, ich kann das im Inspektor nicht beheben. Kein großes Problem, würde man denken, aber es unterstreicht das Problem bei der Verwendung von „Black Box“-Komponenten wie dieser mit eingeschränkten Styling-Optionen.
Vielleicht übersehe ich etwas, aber dieses HTML validiert nicht in HTML5, also wie ist das „kompatibel mit […] Webstandards“?
Web Components sind buchstäblich Webstandards: https://github.com/w3c/webcomponents
Wenn Sie einen Validator verwenden, der dies ablehnt, 1) ist es egal, 2) er liegt falsch.