Kategorie: CSS3

Compass & SASS – CSS3 Adventskalender Tag 17

Natürlich beschäftigt sich der diesjährige CSS3 Adventskalender auch mit dem Thema SASS & Compass. Was SASS & Compass so effizient macht beim Schreiben von CSS hat Mathias Schäfer (molily) bereits sehr umfassend im Webkrauts-Adventskalender-Artikel „Effiziente CSS-Entwicklung mit Sass und Compass“ (Teil 1, Teil 2) gezeigt.

Neue Techniken bringen natürlicherweise auch viel Diskussion mit sich. Und nur weil man einen Pre-Processor wie SASS verwendet, schreibt man nicht automatisch besseres CSS. Es muss schon ein gewisses Verständnis von CSS vorhanden sein, damit SASS, LESS, Stylus, Closure und MyNewCssPreProcessor™ auch effizient eingesetzt werden kann.
Compass & SASS – CSS3 Adventskalender Tag 17 weiterlesen

IE9 CSS3 Support – CSS3 Adventskalender Tag 15

Heute mal ein Thema im CSS3 Adventskalender, das ja ab-und-zu etwas vernachlässigt wird, „IE9 CSS3 Support“ oder „was kann der IE9 überhaupt?“. Der Browser-Marktanteil des IE9 ist glücklicherweise steigend und wird mehr und mehr in Firmen und in Privathaushalten eingesetzt. Die Statistik zeigt, das in Europa aktuell ca. 10% mit IE9, ca. 16% mit IE8 und nur knapp 3% den IE7 verwenden. Dass der IE9 nicht so fortschrittlich ist, wie seine Konkurrenten, ist sicherlich auch hinlänglich bekannt. Mit der Einführung des neuen Betriebssystem „Mango“ für Windows Phone 7 ist nun auch der IE9 auf den Windows Phone 7 als Standard-Browser vorhanden und kann hier die neuen Features rund um HTML5 und CSS3 verarbeiten. Der Marktanteil ist sicherlich noch sehr gering, wird aber sicherlich steigen in den nächsten Jahren. Und wer behauptet, dass das Windows Phone 7 noch keine Relevanz hat, optimiert sicherlich noch für IE6 (#bewusstprovokantethese).
IE9 CSS3 Support – CSS3 Adventskalender Tag 15 weiterlesen

Individuelle Checkbox & Radio Inputs – CSS3 Adventskalender Tag 13

CSS Checkbox Update 2016

Da der Artikel nun 5 Jahre alt ist und sich CSS & Design weiterentwickelt haben, hab ich mal ein Update gemalt. Custom Radio-Button und Checkboxen mit pure™ CSS, barrierefrei & überhaupt:

See the Pen CSS3 Custom Checkbox, Radio Input and Select by Sven Wolfermann (@maddesigns) on CodePen.

— ab hier der alte Artikel von 2011 —
Um es vorweg zu nehmen, beim Stylen von Input-Feldern muss man aus Usability-Gesichtspunkten Vorsicht walten lassen. Der normale User ist an das Aussehen der Formular-Elemente in seinem OS/Browser gewöhnt. Wenn die Input-Felder nun stark von der gewohnten Umgebung abweichen, ist er skeptischer beim Ausfüllen von Formularen und bricht u.U. den Prozess sogar ganz ab. (Quelle: Internet)

Auch wenn man es wollte, einige Formular-Elemente lassen sich zudem nur schwerlich, bis gar nicht cross-browser-konform stylen, z.B. das input[type="file"]. Für Checkboxen und Radio-Buttons möchte ich heute eine Möglichkeit zeigen, die zudem auch die neuen CSS3 Pseudo-Klasse :checked beinhaltet.

Individuelle Checkbox & Radio Inputs – CSS3 Adventskalender Tag 13 weiterlesen

CSS3 transitions to go – CSS3 Adventskalender Tag 9

Transitions ist auch heute wieder Thema im CSS3 Adventskalender. Am Tag 4 zeigte Heiko im Webstandard-Blog am Beispiel eines Call-to-Action Button was man mit Transion und Transform mit CSS3 für Effekte erziehlen kann. Seit der Einführung von -moz-transition im Firefox 4 konnten Transitions endlich mehr verwendet werden, da der Browsermarkanteil der unterstützenden Browser enorm gestiegen ist. Auf die detailierte Funktionweise möchte ich heute nicht weiter eingehn, das war ja schon Thema im letzten Jahr.
CSS3 transitions to go – CSS3 Adventskalender Tag 9 weiterlesen

border-image – CSS3 Adventskalender Tag 7

Heute im CSS3 Adventskalender eine kleines Tutorial, zum Thema „border-image„. Responsive Design ist ja in aller Munde und auch in allen Adventskalendern dieses Jahr. Die Eigenschaft border-image ist dem einen oder anderen Webworker nicht neu, aber im Zusammenhang mit Responsive Images gewinnt es sicherlich mehr an Bedeutung. Die Möglichkeit, dass sich die Content-Box, das Bild und das Border-Image anpassen ist mit CSS3 in modernen Browsern möglich.
border-image – CSS3 Adventskalender Tag 7 weiterlesen