Kategorie: Frontend: HTML5, CSS3, jQuery

Kategorien
Frontend: HTML5, CSS3, jQuery

* { box-sizing: border-box } FTW « Paul Irish

Paul Irish stellt mal kurz box-sizing: border-box vor und stellt fest, dass man es auch benutzen kann, wenn das Projekt mindestens IE8 unterstützt, der Browser-Support scheint recht gut zu sein.

box-sizing: border-box macht im Grunde das, was der IE früher falsch gemacht hat: ein 200px breites Element bleibt im Gesamten 200px breit, auch wenn man padding, margin und Freunde hinzufügt. Normalerweise wirds ja dazu gerechnet, so dass eine Box dann 200px + margin + padding breit ist.

Lässt sich ja hoffentlich in den nächsten Projekten einsetzen, sollte aber vorher getestet werden. für IE7 und drunter gibts auch Polyfills, mehr dann aber im Artikel von Paul Irish.

(via  * { box-sizing: border-box } FTW « Paul Irish.)

Ugh. If I say the width is 200px, gosh darn it, it’s gonna be a 200px wide box even if I have 20px of padding. So as you know, this is NOT how the box model has worked for the past ten years. Wikipedia has a great history of this box model.

Anyway, I have a recommendation for your CSS going forward:

/* apply a natural box layout model to all elements */
* { box-sizing: border-box; -moz-box-sizing: border-box; }

This gives you the box model you want. Applies it to all elements. Turns out many browsers already use border-box for a lot of form elements (which is why inputs and textareas look diff at width:100%;) But applying this to all elements is safe and wise.

Kategorien
Frontend: HTML5, CSS3, jQuery

Code Year – learning to code

Wenn ihr noch einen Vorsatz für dieses Jahr sucht – jetzt noch … – oder einfach Lust habt, coden/programmieren zu lernen, könnte Code Year was für euch sein. Die erste Lektion ist schon gestartet und führt euch in JavaScript ein.

Make your New Year’s resolution learning to code.
Sign up on Code Year to get a new interactive programming lesson sent to you each week and you’ll be building apps and web sites before you know it.

Kategorien
Frontend: HTML5, CSS3, jQuery Linktipps

Perfection kills » Profiling CSS for fun and profit. Optimization notes.

Etwas gehobenere Kost für den Frontend-Entwickler von heute hat Juriy Zaytsev (kangax) veröffentlicht: Perfection kills » Profiling CSS for fun and profit. Optimization notes.. Er hat sich angeschaut, wie sich verschiedene CSS-Selektoren aber auch CSS-Eigenschaften, insbesondere aus CSS3, auf die Performance auswirken.

Mitnehmen kann man, dass der *-Selektor vermieden werden sollte, ein input[type="…"] performanter als ein [type="…"] ist und das insbesondere border-radius, transform: rotate() und box-shadow stark auf die Performance-Bremse drücken können:

Insbesondere sollte man auch darauf achten, nicht (mehr) benötigte Selektoren aus dem Stylesheet zu schmeißen.

Kategorien
Frontend: HTML5, CSS3, jQuery Webdesign/Gestaltung

insert <ins> with somewhat style

Screenshot ins-Element-Formatierung

Mancher von euch hat vielleicht noch schon mal das <ins>-Element benutzt aber keine rechte Idee gehabt, es zu stylen. Ich hab das hier beim Pixelscheucher jetzt so gelöst, Optimierungsbedarf benötigt:

article p ins
	text-decoration:none;
	-webkit-transform: rotate(-1deg);
	-moz-transform: rotate(-1deg);
	-ms-transform: rotate(-1deg);
	-o-transform: rotate(-1deg);
	transform: rotate(-1deg);
	box-shadow: 1px 1px 1px #999;
	display:inline-block;
}

Was tut es? Nun, es macht aus dem <ins> ein inline-block-Element, rotiert es um -1° und verpasst ihm einen leichten Schatten nach unten rechts. Sieht dann nämlich wie nachträglich reingeklebt raus, denn <ins> steht ja auch für nachträglich eingesetzten Inhalt.

So sieht es live aus:

Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen.

Und als Screenshot:

Screenshot ins-Element-Formatierung

(Normalerweise schreibe ich CSS-Anweisungen in eine Zeile, der Übersichtlichkeit halber jetzt mal nicht.)

Kategorien
Contao Frontend: HTML5, CSS3, jQuery

Contao: Das Nachrichtenleser-Modul, der Seitentitel und die Art der Einbindung

Ich hatte da letztens so ein Problem mit dem Contao’schen Nachrichtenleser und einem sich nicht anpassenden Seitentitel. Dieser wollte sich partout nicht ändern und nahm nicht den Titel der Nachricht an, wie er das in neueren Versionen von Contao ja eigentlich macht. Der Fehler lag darin, das Nachrichtenleser-Modul per Insert-Tag einzubinden und nicht ganz normal als Inhaltselement Modul. Bin mir nicht sicher ob ich das als Bug einstufen soll, aber wenn ich mal kurz Zeit habe, werde ich das in den Bugtracker einfließen lassen.

(Hätte ich natürlich auch machen können, als ich diesen Blogbeitrag schrieb, aber damit ist vielleicht auch schon mal ein paar Leuten geholfen, sollten Sie auf dieses Problem stoßen.)

Ach, hier, mein Contao-Community-Profil.

Kategorien
Frontend: HTML5, CSS3, jQuery Netzkultur

Manipulation

Wenn ich mir das richtig in Erinnerung rufe, bestanden meine Anfänge im Frontend (HTML, CSS und so) damit, dass ich bestehende Webseiten umgeändert habe. Wir – ich wohnte zuhause – hatten einen AOL-Account (ja, wirklich) aber ich kannte das Kennwort nicht. So kam ich, wenn ich alleine zuhause war, immer nur auf die AOL-Startseite die noch im Cache lag. Nicht so toll.

Ich speicherte das, was ich da sah, auf der riesigen 7-GB-Festplatte und kam irgendwie dahinter, dass man diese .html-Datei bearbeiten konnte. Wahnsinn. Die Welt war mein und ich konnte die Nachrichten von gestern mit den denen von heute ersetzen. Und wie es der Zufall so wollte, gab es in der Computer-Zeitschrift die ich damals las, einen HTML-Einsteiger-Kurs. Mit <font>, Tabellen-Layouts und Farbnamen.

Ich baute erste Seiten, testete Editoren von damals – Arachnophilia, phase5, etc. – und fand das alles superinteressant. Dann gab es das Homep@ge-Magazin und alles wurde noch mal eine Portion großartiger, sogar der IE6 wurde damals gefeiert, weil er irgendwas mit Doctypes konnte, wovon ich damals nie gelesen hatte.

Heute sind wir ja eher froh, dass wir den IE6 links liegen lassen können. Webseiten machen wir zwar immer noch mit HTML und CSS aber wir testen in mehreren Browsern und unterschiedlichen Geräten.

Kategorien
Frontend: HTML5, CSS3, jQuery Gestaltung und Design Mediengestalter-Ausbildung Webdesign/Gestaltung

Wahre Worte zur Webdesigner-Berufswahl

Designers who don’t want to write code: become a print, interior, industrial or fashion designer. FFS do NOT become a web designer! – Rachel Lehman

Kategorien
Contao Frontend: HTML5, CSS3, jQuery

Contao 2.10.0 – jetzt mit HTML5- und CSS3-Unterstützung

Da ich zurzeit recht viel mit Contao arbeite, freue ich mich natürlich, dass heute Contao 2.10.0 veröffentlicht wurde. Contao ist ein Open Source CMS mit einer großen Community und wird von Leo Feyer betreut:

Contao Version 2.10.0 ist verfügbar. Das Release enthält alle auf der Contao-Konferenz vor­ge­stel­lten neuen Funktionen wie z.B. HTML5- und CSS3-Unterstützung, globale Stylesheet-Variablen, Kom­pri­mierung aller Stylesheets und JavaScripts uvm. Zudem wurden über 220 Tickets in die neue Version eingearbeitet.

Was sich alles zu den vorherigen Versionen geändert hat, steht im Changelog.