Artikel mit dem Schlagwort ‘CSS’

Artikel

Was ich diese Woche gelernt habe

  • Wie verstecke ich Inhalt korrekt vor Screen-Readern (oder eben nicht). Vom richtigen Umgang mit hidden, aria-hidden, visibility und display:none.
  • Was genau inherit, initial, unset und revert machen.
  • Interaktive Elemente sollten immer einen :focus-Style haben. Aber wäre es nicht cool, wenn man einen Mouse-Click anders stylen könnte, als einen Keyboard/Finger/Stylus-Click? (via)
/* Focusing the button with a keyboard will show a dashed black line. */

button:focus {
  outline: 4px dashed black;
}

/* Focusing the button with a mouse, touch, or stylus will show a subtle drop shadow. */

button:focus:not(:focus-visible) {
  outline: none;
  box-shadow: 1px 1px 5px rgba(1, 1, 0, .7);
}

Artikel

Was ich diese Woche gelernt habe

  • Paul Hayes hat mit seiner Familie versuchte im Juli plastikfrei zu leben. Gar nicht so einfach, aber er hat seine Tipps mal zusammengeschrieben. Positiver Nebeneffekt: man kauft weniger. Und weniger Fleisch. Schön.
  • Lazy Loading für <img> funktioniert jetzt nativ – zumindest in Chrome(ium) 76.
  • Auch das asynchrone Laden von CSS wird einfacher – zumindest wenn man einen kleinen Hack nutzt.
  • Mit Rechtspopulisten (in der Öffentlichkeit) zu reden/argumentieren bringt tatsächlich nichts. (Das gilt aber nicht für das private Umfeld. Hier soll man das. Dabei hilft diese Broschüre.)
Artikel

Was ich diese Woche gelernt habe

Artikel

Was ich diese Woche gelernt habe

  • Eine Woche kann schon mal über ein Jahr dauern (wenn man inkonsequent bloggt). Ich werde aber das Gesammelte einfach auf die nächsten Wochen aufteilen.
  • Es gibt eine Lizenz die ausschließt, dass Open Source Software für Zwecke eingesetzt wird, die „Leben, die Umwelt oder unsere Zukunft zerstören“.
  • Eine hilfreiche Übersicht über die „Übergangsfunktionen“ (easing functions) für Animationsabläufe.
  • Es gibt ein hilfreiches CSS-Feature namens scroll snap, das beim Scrollen und Swipen den Viewport einrasten lässt.
  • Wenn man ein Häufchen Kaffeepulver anzündet, qualmt das vor sich hin und vertreibt Wespen. Achtung: der Schwelbrand wird recht heiß, also eine feuerfeste Schale benutzen und am besten mit etwas Alufolie auskleiden, damit sich nichts einbrennt.
  • Endlich muss man Google Webfonts nicht mehr über Google einbetten, sondern kann sie einfach selber hosten. Der google-webfonts-helper hilft dabei.
Artikel

Was ich diese Woche gelernt habe

  • Es gibt ein HTML-Element für Keyboard-Eingaben: 
    <kbd>Enter</kbd>
  • Interessanter Bericht über WGSN bei 99% Invisible. Es geht um eine Firma die gegen Gebühr Trends vorher sagt. Der Service wird z.B. von Textilherstellern in Anspruch genommen, um Kollektionen zu entwerfen.
  • Beeindruckend einfach umgesetzter, beeindruckender Effekt.
    Screenshot Video mit mix-blend-mode Overlay

  • “… to procrastinate is to mourn the precariousness of your creation even before you bring it into the world.” – Costica Bradatan

    via swissmiss

Artikel

Was ich diese Woche gelernt habe

Artikel

Was ich diese Woche gelernt habe

  • Dank ihrer App kennt Uber den aktuellen Akkustand. Sie behaupten zwar, sie würden das nicht in ihr dynamisches Preisgestaltungs-Modell einfließen lassen, aber es ist anscheinend so, dass man sich mit einem leeren Akku eher für eine teure Fahrt entscheidet (Podcast, bei ca. Minute 18)

    (Hidden Brain, Episode 31, Direktdownload)
  • Der Trick mit text-indent:-9999px ist zweifelhaft. Mit display:none ist der Inhalt auch für Suchmaschinen und Screenreader nicht sichtbar. Eine schicke Methode haben die FE-Menschen der Welt gefunden: 
    .visually-hidden {
    position: absolute;
    height:1px;
    width:1px;
    clip: rect(0 0 0 0);
    overflow:hidden;  
    border: 0;
    margin: -1px;
    padding: 0;
}
  • Manchmal, aber nur manchmal, haben Programmierer !important gern.
  • Coole Hacks um die CSS Spezifität zu erhöhen oder zu verringern (ohne dass man viele Selektoren oder IDs stylen muss):
    Spezifität erhöhen durch das mehrfaches anwenden derselben Klasse:
    .class.class {…}
    Spezifität einer ID verringern, bzw. eine ID stylen, ohne Verwendung eines ID-Selektor:
    [id='example'] {…}
Artikel

Was ich diese Woche gelernt habe

  • Egal wie wenig man sich für einen Urlaub vornimmt: am Ende schafft man immer noch weniger.
  • Handwerkliche Arbeit unterschätze ich grundsätzlich um den Faktor 4.
  • CSS-Pixel sind ein Winkel(!)maß. Der Mond ist von der Erde aus gesehen 24,3px hoch. Echt? Ist schon 1. April?
  • Ein wesentlicher Teil der Menschenwürde liegt in der Wahrung der Privatsphäre, und da die Menschenwürde unantastbar ist, kann man das auf Datensouveränität übertragen. So wird im Manifest von „Akkurater Widerstand“, einem e.V. in Gründung, argumentiert.
    Die Mitglieder fielen meines Wissens nach zuerst bei Demos auf, wo sie in Nadelstreifen und mit Krawatte, eben ganz akkurat, auftraten. Nicht im Verdacht von Technikangst oder Antiamerikanismus getrieben zu sein. Sie zeigen so, dass das Thema Massenüberwachung einfach jeden betrifft, nicht nur Hacker mit Kapuzenpulli und Skimaske (um das in der Öffentlichkeit gezeichnete Klischee zu zitieren).
    Akkurater Widerstand will die Spielregeln hinter den Kulissen offenlegen und hat dafür die ein oder andere Aktion am Start. Zum Beispiel soll geprüft werden, wie viele verschiedene Preise man durch unterschiedliches Targeting bei einem Produkt finden kann. Eine andere Aktion bei der jeder mitmachen kann: beim Surfen werden dann Fake-Daten erzeugt, um die „illegale Massenüberwachung durch NSA & Co.“ (also auch durch ISP, Werbenetzwerke, Retargeting, Online-Händler etc.) zu erschweren.
    Die Seite bietet ein paar nette Beispiele, die der Otto-Normal-Surfer vielleicht noch nicht kennt (z.B. dass sich Preise für User ändern, wenn sie mit unterschiedlichen Betriebssystemen unterwegs sind).