Kategorie-Archiv: Frontend: HTML5, CSS3, jQuery

Slider-Extensions für Contao im Vergleich und Überblick

1 Antwort

Screenshot der Contao-Slider-Vergleichstabelle

In der Agentur (so wollte ich schon immer mal einen Satz anfangen) arbeiten wir recht viel mit Contao, wenn wir Kunden-Websites neu aufziehen. Oftmals wird auch ein Slider benötigt – sinnvoll oder nicht –, der sich mit einer der vielen Extensions gut nachrüsten lässt. Leider weiß man aber nie so genau, welcher Slider was kann und was nicht, für welche Contao-Version er taugt, und und und …

Daher habe ich mir vor ein paar Monaten die Mühe gemacht ein Google Doc hierfür aufzusetzen, welches die unterschiedlichen Kriterien auflistet. Unter anderem sind dies:

  • 2.11-/3.0-kompabilität;
  • HTML5/XHTML-Ünterstützung;
  • ob nur Bild- oder auch andere Elemente verwendet werden können;
  • die Verwendung nur als Modul oder Inhaltselement oder gar beides möglich ist;
  • Responsiveness;
  • Mootools/jQuery;
  • und weitere …

Da ich selbst nicht die Zeit und Muße hatte, diese Tabelle zu pflegen, habe ich sie für die Öffentlichkeit bearbeitbar gemacht. Und viele viele viele Leute aus der Contao Community haben mitgewirkt wofür ich mich auch an dieser Stelle noch einmal bedanke. DANKE!

Flattr this!

@media screen in @media screen

1 Antwort

Vor ein paar Wochen stolperte ich eher zufällig über die verschiedenen Interpretationen von verschachtelten @media-Anweisungen. Die jeweils aktuellen Versionen von Safari auf OS X (6.0.3) und iOS (6.0) 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-Block (at media) auf die Seite, Firefox und Chrome den zweiten (at media in at media). Beim Internet Explorer sieht es so aus: IE9 und IE10 zeigen den ersten content-Block. 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. CSS 3 hingegen, wonach sich Firefox und Chrome richten, erlaubt es. 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 angeben: . Oder ihr schreibt eure Media Queries, wenn sie in einem @media-Screen-Selektor stehen nur folgendermaßen: (max-width: 40em) { color: #b4d455; }

Flattr this!

beyond tellerrand 2013

1 Antwort

Photo von der beyond tellerrand 2013

Vergangene Woche war ich zwei Tage lang auf der beyond tellerrand im Düsseldorfer Capitol Theater, einer Konferenz für Webschaffene die von Marc Thiele superdupergut organisiert wurde. Es war die dritte beyond tellerrand überhaupt und für mich die erste. (Das Ticket hat mir freundlicherweise mein Arbeitgeber gesponsort, vielen Dank dafür.) Einige der Themen dieses Jahr waren Responsive Webdesign, Verzicht auf Photoshop und direktes Layouten im Browser sowie Selbst- und Firmenfindung. In ein paar Tagen oder Wochen werden die Talks wohl auch auf Vimeo landen.

Weitere Berichte von anderen Besuchern findet ihr am Ende des Beitrags.

weiterlesen

Flattr this!

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

4 Antworten

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. 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.

Flattr this!

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

Hinterlasse eine Antwort

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.

Flattr this!

Responsive Webdesign – wirklich gut? (Klar, aber …)

7 Antworten

Schon vor ein paar Monaten hatte ich drüber nachgedacht: malen wir uns die Responsive-Webdesign-Welt schöner, brauchbarer, als sie ist? Kommen die Besucher damit wirklich klar? Brauchen wir es wirklich immer? Wie das das aber so ist, verliert man einen Gedanken schon mal, bis dann zwei Tweets auftauchen, die den Gedanken wieder aufkommen lassen:

Nehmen wir mit RWD dem „normalen“ Besucher seine Gewohnheiten, wenn wir die Seiten so anpassen, dass Spalten verschwinden oder Navigationsmenüs sich hinter einem Button mit Icon verstecken? Weiterlesen →

Flattr this!