Browser

Fieser Bug bei externen SVG-Sprites

Das war es dann wohl erst einmal mit extern geladenen SVG-Sprites, dank Apple. Nico Brünjes hat herausgefunden, dass die aktuellen Safari auf dem Desktop und iOS für jedes Icon das externe Spritesheet erneut anfordern. Das kann zu enormen Übertragungen führen und geht bei mobilen Geräten direkt ins Geld. Die Reaktion bei ZEIT Online, wo Nico arbeitet, ist nun die Einbettung der SVG-Datei. Dadurch wird der Bug umgangen. Leider entfällt so auch das Caching der Datei. Mit jeder Seite wird das Set an Icons immer mitgeladen. Auf der anderen Seite spart diese Lösung Polyfills für einige Browser ein.

Da Apple betroffen ist, ist die Chance auf eine schnelle Lösung des Problems gleich Null. Der Konzern hat in den letzten Jahren klar gemacht, dass er sich für seinen Browser nur rudimentär interessiert und Kommunikation mit der Community sowieso ablehnt.

Der Bug im Safari ist einfach zu heftig, als dass man ihn ignorieren könnte. Die Auswirkungen gehen beim Endnutzer direkt ins Geld. Das können wir nicht wollen. Nico weist in seinem zweiten Artikel darauf hin, dass Apple sogar SVG-Features aus den modernen Safari entfernt hat. Das macht keine Hoffnung. Auf absehbare Zeit sollten wir die Option „externes SVG-Spritesheet“ aus unseren Projekten streichen.

Ein neues Zeitalter bricht an

Es mag so mancher seit heute denken, dass ein neues Zeitalter angebrochen sei. Das Zeitalter, in dem man sich nicht mehr um alte Internet Explorer kümmern muss. Denn schliesslich hat Microsoft verkündet, sich ab heute nur noch um den IE11 und Edge zu kümmern. Für ältere Versionen gibt es keine Updates mehr, auch keine Sicherheitsupdates.
(mehr …)

Interview auf den HTML5-Days

Auf den HTML5-Days in Berlin wurde ich von Tom Wießeckel zu HTML, CSS und Browsern befragt. Auf Youtube gibt es jetzt das Ergebnis zu begutachten.

Microsoft strengt sich an

Für Frontendentwickler ist die Langlebigkeit des Internet Explorers mit das größte Problem. Während Firefox, Chrome und Opera sich selbst aktualisieren und deshalb alte Versionen dieser Browser quasi nicht existieren, ist dies beim Microsoft Browser anders. Das liegt auch daran, dass Großunternehmen und Behörden sehr langsam in ihren Update-Zyklen sind.
(mehr …)

Linkfutter 216

  • Firefox hat in der eben erschienen Version 38 für Desktop und Android sowohl das picture-Element, als auch srcset „scharf geschaltet“. Responsive Images sind nun also für alle Nutzer da und Chrome/Opera stehen nicht mehr alleine da. Es gibt noch einen kleinen Bug, an dem aber gearbeitet wird. Der betrifft aber eigentlich nur uns, die wir Webseite mit der neuen Technik erstellen und testen.
  • Google-Suche und JavaScript, eine interessante Studie
  • Stefan Baumgartner hat wieder ein paar Gulp-Tipps veröffentlicht. Am Artikelanfang gibt es Links zu seinen weiteren Gulp-Artikeln.
  • In Search of a Living Design System
  • HTML Arrows ist eine der vielen Seiten, die die Unicode-Symbole für Webentwickler sichtbar machen und zeigen, mit welchen seltsamen Codes sie eingefügt werden können. Und auch hier fehlt mir die Schreibweise für die content-Eigenschaft von CSS. Übrigens ist die tabellarische Ansicht besser, als die große. Denn bei letzterer muss man schon raten, damit man den Code richtig zuordnen kann – oder die Maus lange genug über dem Code halten.

Linkfutter 198 – Project Spartan

Linkfutter 191 – Shadow DOM

Bei HTML5Rocks gibt es drei Tutorials zum Shadow DOM: Eines zum Styling, eines, das in die Grundlagen einführt und eines, das erweiterte Konzepte und DOM APIs thematisiert.

Wenn man dann mit dem Shadow DOM herumspielen will, benötigt man eine gute Übersicht über die jeweiligen Pseudoelemente. Eine sehr umfangreiche Übersicht über Pseudoelemente gibt es als Github gist. Jeder Abschnitt beginnt mit einer knappen Erklärung bzw. Einordnung. Die einzelnen Pseudoelemente muss man sich dann anhand der Namen erschliessen.

Diese Liste von Pseudoelementen ist übersichtlicher, aber auch kürzer.

Microsoft bringt einen neuen Browser

Microsoft bringt nicht nur ein neues Betriebssystem im Herbst auf den Markt – Windows 10 -, sondern auch einen neuen Browser. Aktuell heisst er noch „Spartan„, mal schauen, ob sich dieser Name noch ändert. Bislang habe ich es so verstanden, dass „Spartan“ neben dem neuen IE11 existieren wird. Er soll eine neue Rendering-Engine haben.

Allerdings glaube ich eher, dass Microsoft den IE in zwei Versionen veröffentlicht: einmal ohne Rücksicht auf alte IE-Rendering-Modes (Spartan) und einmal mit den alten Rendering-Engines drin (IE11). Es würde mehr Sinn machen. Ich habe bislang noch keine klare Aussage entdeckt, nur verschwurbeltes Marketing-Bla-Bla. Übrigens wird der User-Agent-String des neuen Browsers wohl unterhaltsam aussehen. Alle Browser werden erwähnt, nur der IE nicht. Solche Strings sind doch einfach nur Grütze.

Linkfutter 174

Wir haben uns dran gewöhnt, immer über Microsoft und den IE zu schimpfen. In der Vergangenheit war das auch korrekt, doch in der Zwischenzeit hat Microsoft gelernt und ist eindeutig besser geworden. Interessant ist in diesem Zusammenhang, dass es vor Kurzem ein spezielles „Safari-Release“ von jQuery gab. Das wichtige Zitat in diese Zusammenhang ist: „Apple is by far the least transparent browser maker“, und das ist mehr als traurig.
(mehr …)

Forschung zu Media-Queries

Media-Queries kann man nicht nur in eine CSS-Datei schreiben. Man kann auch bei der Verlinkung externer Stylesheets in einem Attribut angeben, für welche Umgebungsbedingungen das verlinkte Stylesheet gelten soll.

Scott Jehl hat sich die Mühe gemacht und alle vorstellbaren Szenarien für die Anreicherung von verlinkten Stylesheets mit Media-Queries getestet. Das Ergebnis ist eindeutig und einfach zu merken: Alle Browser laden alle externen Stylesheets, auch wenn eine Media-Query nicht zutrifft.

Ich finde das Ergebnis recht klar und logisch. Denn schliesslich können sich die Umgebungsbedingungen theoretisch ändern, während der Nutzer die Seite betrachtet. Wenn der Browser dann alle CSS-Dateien zur Hand hat, kann er schnell auf die Änderung reagieren.