Ein paar coole CSS Tricks

1. Häßlichen Klickrahmen entfernen

Im Firefox und in verschiedenen Webkit Browsern (Chrome und Safari) gibt es immer diese häßlichen Rahmen wenn man etwas anklickt oder mit der Maus in ein Textfeld klickt. Abhilfe schafft:

input[type="text"]:focus {
  outline: none;
}

2. Browserweichen in der CSS Eigenschaft des Selektor

Ohne großartig CSS Dateien für einzelne Browser anlegen zu müssen kann man die auch im Stylesheet selber ansprechen.

div {
  background-color: #999; /* all browsers */
  *background-color: #ccc; /*Ein * vor der Eigenschaft - IE7 und drunter */
  _background-color: #000; /* Ein _ vor der Eigenschaft - IE6 und drunter*/
}

Natürlich ist das nicht für größere Projekte geeignet. Da empfiehlt sich immer ein eigenes Stylsheet allein wegen der Übersicht beim Coden zu laden.

3.  Transparanz in allen Browsern.

div {
/* Standard-Browser */
opacity:0.7;

/* Diese werden von Standard-Browsern einfach ignoriert */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";  /* IE8 */
filter: alpha(opacity=70); /* IE 5-7  */
}

Das wars erstmal.

 

Kommentar hinterlassen