Kategorien
Linktipps Usability Veranstaltungen Webdesign/Gestaltung Wordpress

Linkscheucher 32 – Usability, Videos von Konferenzen, Responsive Images

Kategorien
Frontend: HTML5, CSS3, jQuery

Fwd: Another 20 Docs and Guides for Front-End Developers

Louis Lazaris hat eine Liste über Frontend-Tools, Info-Seiten und Anleitungen zusammengestellt. Sehr interessant finde ich Mastering the :nth-child (was man hier nicht alles kombinieren kann) und den Code Fight Club.

Aber auch einige Flexbox-Hilfestellungen gibt es (Flexbox adventures, flexbugs), ein Thema mit dem ich mich auch mal umgehender mit beschäftigen möchte.

Another 20 Docs and Guides for Front-End Developers

Kategorien
Frontend: HTML5, CSS3, jQuery Typographie Webdesign/Gestaltung

Silbentrennung im Browser mit CSS hyphens

„Die Texte hätten wir gerne in Blocksatz.“ Spätestens hier gilt es zu überprüfen wie es um die Silbentrennung im Browser steht: geht, aber nicht ohne Präfixe und lang-Attribut, und erst recht nicht überall.

Kategorien
Frontend: HTML5, CSS3, jQuery Linktipps

WTF, HTML and CSS?

Reasons HTML and CSS might make you say what the fuck. A curated list of commonly frustrating HTML and CSS quandaries, miscues, and dilemmas.

via WTF, HTML and CSS?.

Kategorien
Frontend: HTML5, CSS3, jQuery

Verschachtelung von @media / Media Queries

Update, Februar 2016: Ab Safari 6.1 (OS X) wurde das Verhalten verändert und auch hier wird nun die zweite content-Deklaration („at media in at media“) angezeigt. IE11 hat noch das gleiche Verhalten wie IE9 und IE10 inne und zeigt nur das erste content. Microsofts Edge widerum macht es nach CSS3 und stellt das zweite content dar.

Vor ein paar Wochen stolperte ich über die verschiedenen Interpretationen von verschachtelten @media-Anweisungen. Die jeweils aktuellen Versionen von Safari auf OS X (6.0.3) und iOS (6.0) sowie IE9 und IE10 interpretierten den nachfolgenden Code etwas anders als Firefox (20.0) und Chrome (26.0.1410.65):

@media screen {
  .wrapper {
    dispay: block;
  }
  .wrapper:before {
    content:"at media";
    display: block;
  }
  @media screen and (min-width: 2em) {
    .wrapper:before {
      content:"at media screen in at media";
    }
  }
}
Check out this Pen!

Die Safaris nämlich schreiben den ersten content („at media“) auf die Seite, Firefox und Chrome den zweiten („at media screen in at media“). Beim Internet Explorer sieht es so aus: IE9 und IE10 zeigen den ersten content. Mich interessierte wieso das so ist und was richtig ist: die Safaris verhalten sich nach dem CSS-2.1-Regelwerk, das kein verschachteln von @media-Regeln erlaubt:

At-rules inside @media are invalid in CSS2.1.

Die CSS-3-Spezifikation hingegen, wonach sich Firefox und Chrome richten, erlaubt es.

This means that when multiple conditional group rules are nested, a rule inside of both of them applies only when all of the rules‘ conditions are true.

Detaillierter erklärt hat es Daniel Tan bei Stack Overflow:

Now, the actual issue here is that nested @media rules are not valid in CSS2.1 because you’re not allowed to nest any at-rules within @media rules. However, things seem quite different in CSS3. Namely, the CSS3 Conditional Rules module states very clearly that @media rules can be nested, even providing an example:

Natürlich kann man sich fragen, wieso man die beiden @media-Regeln überhaupt verschachtelt. Das kam daher, dass ich mit der Contao-Erweiterung theme_plus ein Stylesheet einband und diesem eine @media-Anweisung auf den Weg gab. Dazu dann noch das Media Query im Stylesheet selbst und schon stolperte ich über das oben genannte Problem.

Einen wirklichen Rat kann ich euch nicht auf den Weg geben. Achtet darauf, ob und welche @media-Anweisungen ihr verschachtelt. Ich habe zum Beispiel die für das gesamte Dokument entfernt, da ich sie im Stylesheet nicht benötigte – und auch im ersten Moment nicht mitbekam, dass sie mitgegeben wird. Wenn ihr eure Stylesheets nur für eine Geräteklasse verwenden lassen wollt, könnt ihr dies auch im <link /> angeben: <link media="screen" />. Oder ihr schreibt eure Media Queries, wenn sie in einem @media-Screen-Selektor stehen nur folgendermaßen: (max-width: 40em) { color: #b4d455; }

Kategorien
Frontend: HTML5, CSS3, jQuery Linktipps

☞ Bilder als Data-URL: Ein Blick auf die Performance der Technik

Achtung: vermutlich war ich hier etwas voreilig mit Behauptungen, mehr dazu in den Kommentaren.

Sergej Müller hat das Einbinden von Bildern in CSS als Data-URL einem Performance-Test unterzogen Recommended Site. Sein Fazit:

Durch die Base64-Kodierung der Bilder hat sich der „Gewicht“ der Gesamtdatei nahezu verdoppelt. Das trägt dazu bei, dass der Server eine deutlich größere Menge an Daten zu übertragen hat – eine kostspielige Prozedur. Erst die GZIP-Komprimierung reduziert die Dateigröße erheblich und kann die Differenz der Ladezeiten auf ein Minimum verringern.

Ebenfalls nimmt der Browser mehr Zeit in Anspruch, um den Base64-Code zu dekodieren. Ein lokaler Vergleich der Dateien hat bestätigt, dass die Ausführung (das Laden entfällt, da lokal) des HTML-Codes mit Data-URLs stets um 30 ms hinterher hing. Bilder als Data-URL: Ein Blick auf die Performance der Technik

Das Base64 die Datenmenge nahezu verdoppelt war mir soweit sogar bewusst (Nachtrag: meistens handelt es sich nur um ein Drittel mehr), weswegen ich von Data-URLs bislang auch Abstand genommen habe. Der Vorteil nur eine Datei laden zu müssen ist laut diesem Test also eher eine Nullnummer, hinzu kommt ja auch noch die Zeit, die Bilddaten zu dekodieren.

Ändert sich dann doch mal eine Grafik muss diese im CSS aktualisiert werden und damit auch die komplette CSS-Datei beim Besucher neu geladen werden – inkl. der anderen Grafiken.

Kategorien
Frontend: HTML5, CSS3, jQuery

Luke Vader former handle Anakin – Reihenfolge von CSS-Pseudo-Klassen

Heute ist mir ein Merksatz zur Reihenfolge von CSS-Pseudo-Klassen ins Gedächtnis gerufen worden: Luke Vader former handle Anakin. Er beschreibt, in welcher Reihenfolge Pseudo-Klassen bei Links definiert werden sollen:

a:link {}
a:visited {}
a:focus {}
a:hover {}
a:active {}

Der Satz machte vor ein paar Jahren die Runde, leider finde ich keine Quelle hierzu. Um bei Star Wars und CSS zu bleiben: Andy Clarke hat vor acht Jahren CSS-Spezifität mit Star Wars erklärt.

Kategorien
Mac & iPhone

☞ iPhone 5 and iOS 6 for HTML5 developers, a big step forward: web inspector, new APIs and more

Einen guten Überblick, was iOS 6 neues tolles mit HTML5 und CSS3 anstellen kann, iPhone 5 and iOS 6 for HTML5 developers, a big step forward: web inspector, new APIs and more

Interessant finde ich vor allem, dass man anscheinend auch die Passbook-App mit Tickets und dergleichen füttern kann. Zudem gibts endlich Dateiuploads mit <input type=“file“> und auch die Kameras am jeweiligen iDevice können angesprochen werden.

Mit den Smart App Banners fallen nun hoffentlich immer öfter die Pop-Ups weg, die „diese Website auch eine iOS-App hat“ in Richtung Besucher schreien.

Absolutes Highlight ist aber immer noch das Remote Debugging zwischen Desktop- und iDevice-Safari.

In Sachen iPhone 5 spricht der Artikel noch an, dass das neue iPhone serverweitig nicht identifizierbar ist, sondern nur über JavaScript und/oder natürlich Media Queries – siehe verlinktem Artikel. Kann man dann natürlich per Cookie speichern – hier frage ich mich aber, inwieweit Cookies zwischen den Geräten synchronisiert werden, jetzt wo man über iCloud Lesezeichen und Tabs zwischen Desktop- und iOS-Device-Safari synchronieren kann und dann die falschen Größen auftauchen.

iOS 6 kann übrigens ab sofort auf gängige iOS-Geräte installiert werden.