13 Apr 2010

Text Selection CSS

Mithilfe von CSS läst sich auch ändern wie markierter Text (oder auch Bilder) aussehen soll. Dazu verwendet man das Pseudo-Element ::selection. Dieser Selector sollte eigentlich dem CSS Level 3 hinzugefügt werden wurde dann aber wohl doch weggelassen. Näheres dazu hier. Doch in manchen Browsern wird es schon unterstützt.

.blau::-moz-selection {
   background: #00f;
}
.blau::selection {
   background: #00f;
}
.rot::-moz-selection {
   background: #f00;
}
.rot::selection {
   background: #f00;
}

Wie man sieht braucht Firefox (wie bei vielen Dingen rund um CSS3) mal wieder einen anderen Befehl. Da es sich hier aber um einen Selector handelt wird der Code um einiges länger. Man sollte die Selctoren auch nicht via .blau::selection, .blau::moz-selection verknüpfen da es bei Browsern die den moz- Präfix nicht kennen zu Problemen führen könnte. Der oben gezeigte Code würde so dargestellt werden:

Bitte diesen Text markieren um das Ergebnis zu sehen

Bitte diesen Text markieren um das Ergebnis zu sehen


Da dies ein Eingriff in das User-Interface ist solle man Techniken wie diese nur verwenden wenn man sich sicher ist was man tut, ansonsten gefährdet man eine Benutzterunfreundlichkeit.

12 Apr 2010

Firebug Extensions

Firebug ist eines der besten Firefox Addons für Webentwickler. Doch das Tool ist nicht vollkommen und lässt sich auch gut erweitern. Hier meine Lieblings-Erweiterungen für Firebug:

Widerbug
Mit dieser Erweiterung wird Firebug nicht unter dem Browser-Fenster plaziert sondern auf der Seite. Perfekt für alle mit einem großen oder mehr als einem Monitor.
FireQuery
‘Must have’ für alle die mit jQuery arbeiten.
CodeBurner
Fügt Firebug eine Reference Datenbank für HTML und CSS bei.
FireFinder
Mit FireFinder lassen sich HTML Elemente mithilfe von CSS Selectoren anzeigen.
PageSpeed
Google hat mit diesem (OpenSource-) Tool mal wieder etwas sehr nützliches auf den Markt geworfen. Die Ladezeiten von jedem einzelenen Element einer Site läst genauestens Analysieren.

Für weiter Vorschläge bin ich natürlich immer offen.

08 Apr 2010

CSS Sticky Footer

Footer, also die Fußzeilen von Webpages, werden in dank Web 2.0 immer großzügiger gestaltet und sind mittlerweile bei vielen Websites schon zu einem gleich wichtigen Teil wie Header geworden. Sticky Footer sind eine Mischung aus static (normal, am Text- bzw. Elementfluss angepasst) und fixed (am viewport angepasst, bleibt immer am Rand des Browserfensters stehen) Footer. Bei viel Content bleiben sie unter diesem stehen aber wenn weniger Content vorhanden ist bleiben Sie am unteren Rand des Browserfensters hängen. Hier gibts auch eine Demo dazu: file.chris-blank.de/stick_footer/
Der HTML-Code:

<html>
   <head>
      <link rel="stylesheet" href="style.css" />
   </head>
   <body>
      <div class="wrapper">
         <p>Content...</p>
         <div class="push"></div>
      </div>
      <div class="footer">
         <p>Footer</p>
      </div>
   </body>
</html>
* {
   margin: 0;
}
html, body {
   height: 100%;
}
.wrapper {
   min-height: 100%;
   height: auto !important;
   height: 100%;
   margin: 0 auto -4em;
}
.footer, .push {
   height: 4em;
}
/*clear für multi-column designs*/
.footer, .push {
   clear: both;
}

Beim CSS ist zu beachten das die Angaben für die Höhe des Footer an beiden Stellen übernommen werden muss.

28 Mär 2010

Worst ‘professional’ webdesign ever

Ich bin gerade über webking.com gestolpert. Würde ich sagen das dies die schlechteste Website ist die ich in meinem bisherigen Leben gesehen habe wäre das ganz klar eine lüge. Meine ersten Seiten (damals mit Frontpage erstellt) sahen nicht viel besser aus. Aber dieser Mensch versucht mit Hosting, Markting und Design geld zu machen. Einfach genial finde ich folgende Aussage:

Although the latest Internet Technologies can usually make a WebSite very exciting, they must be used with caution and careful planning, balancing New Technology with Older Technology[…]

Die Website ist echt einen blick/lacher Wert.
Ab Morgen bietet vielleicht jemand professioneles Grafikdesign mit MS Paint an.

11 Mär 2010

Grafiken in Auswahllisten hinzufügen

vcss-blue
Grafiken in Auswahlliste sind nicht nur nett anzuschaun sondern erhöhen die Benutzterfreundlichkeit.
Mit Hilfe von CSS ist dies kein Problem. Allerdings ensteht bei längeren Listen sehr viel Code.
Der HTML-Code zeigt noch keine Besonderheiten:

<select name="staat" size="1" id="staat">
<option selected="selected">Bitte wählen....</option>
<option value="Deutschland">Deutschland</option>
...
</select>

Beim CSS kann man gut mit Copy&Paste arbeiten:

<style type="text/css">
option[value=Deutschland]:before {
	content: url(de.gif) " ";
}
...
</style>

So könnte das ganze aussehen wenn es fertig ist:



Dank geht an www.nationalflaggen.de für das zur verfügung stellen der Grafiken.