Ramschkasten.de

Alles was so hängen bleibt

Aufräumen im CSS-File

Beim lesen des Artikels „Efficient CSS with shorthand properties“ bestätigte sich meine Arbeitsweise zur Verhinderung von übermäßigen Inhalten im CSS-File. Die Gefahr bei der Optimierung von Webseiten besteht meistens darin, die Beschreibungen des Seitencode aus der Webseite in die CSS-Datei zu verlagern. So tritt man zwar dem Ladevolumen der Seiten entgegen doch die CSS-Dateien blähen sich künstlich auf.

Zusammenfassend richtet sich das Augenmerk darauf die Eigenschaften von background, border, border-color, border-style, border sides, border-width, font, list-style, margin, outline, und padding in einer Zeile zu beschreiben, als eine Zeile für jede Eigenschaft. Ein paar Bytes zusätzlich lassen sich dann auch noch einsparen, wenn man in den Farbeigenschaften statt drei Paaren von hexadezimalen Zahlen nur je eine davon übergibt. So wird aus #000000 #000 oder #336699 #369.

Hilfreich fand ich den Hinweis bei der Beschreibung der Seitenelementen wie top, right, bottom, left. Durch eine Eselsbrücke soll man sich eine Uhr vorstellen bei der die 12=top, die 3=right, die 6=bottom und die 9=left anzeigt. Easy! Bsp: statt margin-top:1em; margin-right:0; margin-bottom:2em; margin-left:0.5em; gibt man margin:1em 0 2em 0.5em an.

Weniger Code ergibt mehr Übersicht. Wer mehr Informationen benötigt findet in den folgende Büchern weitere Hilfe:



 

Mach Dich nackig! – für Web 2.0

Am 5.April startet der „First Annual Naked Day“. Zeig deine Webseiten ohne Design – also einfach nacksch. Der Hintergrund: Webseiten sollten in einem guten Markup geschrieben sein, eben ohne viel Firlefanz. Entwicklern und Designern von Webseiten wird so bewusst gemacht, dass es nicht nur auf das Aussehen von Webseiten ankommt sondern auch auf deren Lesbarkeit. Da es User gibt die ohne Design auskommen müssen sollte eine Webseite gänzlich ohne Design funktionell und navigierbar sein.

Gentlemens, Start your Engines! Laßt es rocken. Geht rann und bereitet Eure Webseiten auf diesen Tag vor.

Ausgelöst wurde diese Initiative von Dustin Diaz. Übrigens läßt sich diese CSS-freie Ansicht via FF über Strg+Umschalt+S auslösen.

Runde Ecken und vertikale Ausrichtung per CSS

Runde Ecken sind wieder mal ziemlich in. Die Umsetzung ist teilweise mit der Hilfe von Javascript und diversen Background-Elemente gelöst wurden. Letztens verfing sich jedoch ein Artikel in meinem Blognetz in der der Ansatz über die Verwendung von puren CSS verfechtet wird. Statt Nifty-Corners heißt es jetzt Spiffy Corners. Ein Generator wird gleich mitgeliefert, so dass die runden Ecken beim Farbwechsel schön überlaufen (anti-aliased).

Hier das Beispiel:

#box {width:200px;margin-left:100px;}.spiffy{display:block}.spiffy *{display:block;height:1px;overflow:hidden;background:#BFEF01}.spiffy1{border-right:1px solid #e3f891;padding-right:1px;margin-right:3px;border-left:1px solid #e3f891;padding-left:1px;margin-left:3px;background:#cff340;}.spiffy2{border-right:1px solid #f8fde5;border-left:1px solid #f8fde5;padding:0px 1px;background:#cbf231;margin:0px 1px;}.spiffy3{border-right:1px solid #cbf231;border-left:1px solid #cbf231;margin:0px 1px;}.spiffy4{border-right:1px solid #e3f891;border-left:1px solid #e3f891;}.spiffy5{border-right:1px solid #cff340;border-left:1px solid #cff340;}.spiffy_content{padding:0px 5px;background:#BFEF01;height:100px;}

Bei Yuhů gibt es eine Lösung wie man die Elemente per CSS vertikal zentrieren kann.