Beiträge zu “CSS”

CSS Sprites automatisiert aktualisieren

Bei der Optimierung von Webseiten auf Geschwindigkeit ist die Reduktion der notwendigen Anfragen einer der wichtigsten Maßnahmen. Kleine Bilddateien für Logos, Trusted Shop Logos oder SSL Zertifikate sind dabei nicht zu unterschätzen.

Für diesen Fall werden sogenannte “CSS Sprites” empfohlen. Die Idee: man packt alle kleinen Dateien in eine einzelne Datei und verwendet dann CSS Anweisungen um an der richten Stelle den richtigen Ausschnitt zu verwenden. Im allgemein kann man dazu kleine online Tools verwenden um sich diese Sprite zu erstellen.

Etwas kniffeliger kann es werden wenn diese Bilddateien nicht statisch sind sondern täglich aktualisiert werden.

In meinem Fall habe ich das so gelöst. Ich verwende convert aus dem imagemagick Baukasten um die Gif Datei täglich mit Cron zu aktualisieren.

 convert logo_shop.gif trusted-shop-siegel.gif trusted-shop-rating.gif thawte-seal.gif -append sprite.gif

Innerhalb der CSS Datei werden dann die genauen Positionen festgelegt

.logo_shop, .trusted-shop-siegel, .trusted-shop-rating, .thawte {
  background-image: url('sprite.gif');
  background-repeat: no-repeat;
}
.thawte{
    background-position: 0px -344px;
    width: 60px;
    height: 61px;
}
.trusted-shop-rating {
    background-position: 0px -153px;
    width: 190px;
    height: 190px;
}

Stellt sich die Frage wie man die genaue Position herausbekommt. Hilfreich hierbei kann die Website SpriteCow sein. Aber am Ende muss man wohl immer etwas probieren.

Im HTML der Webseite kann man dann die Bilder ungefähr so einbinden

   <a href="{$index}"> <div class="logo_shop"></div></a>

Bei der Optimierung der Bilder auf Größe kann einem auch noch kraken.io hilfreich sein.

CSS Klassennamen dürfen nicht mit einer Zahl beginnen

Nur so als Hinweis. Hab ich erst nach “einigem” Suchen herausgefunden. Steht auch hier

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier “B&W?” may be written as “B\&W\?” or “B\26 W\3F”.

Google Fonts vom eigenem Webserver einbinden

Bei den Google Fonts gibt es viele schöne Schriften die sich auch einfach einbinden lassen in dem man auf seiner Webseite direkt auf die Schriften bei Google verlinkt.

Das bedeutet aber natürlich das auch jeder Besuch auf der Webseite an “Google” gemeldet wird.

Da ich dies eigentlich vermeiden möchte war ich auf der Suche nach einer Möglichkeit diese Schriften nicht von Google direkt sondern von meiner eigenen Webseite aus einzubinden.

Das geht auch recht einfach. Unter dem oben genannten Link die Schriften in einer Collection zusammenstellen die man möchte. Dann rechts oben auf den etwas schwer zu erkennenden Downloadbutton drücken und diese Zipdatei in einem Verzeichniss auf dem Server auspacken. z.B.

html/fonts

In einer der CSS Dateien dann folgenden einfügen

@font-face {
  font-family: 'Lobster';
  font-style: normal;
  font-weight: 400;
  src:  url("/fonts/lobster/Lobster.ttf") format("truetype");
 }

Und dann kann diese Schrift ganz normal als “Font Family” angesprochen werden

Vereinfachte CSS Definitionen mit Less

Entwickelt man Web-Anwendungen mit CSS kann es schnell passieren, dass man den Wunsch nach Variablen oder Regel verspürt da man sonst gleiche Attribute mehrfach angeben muß.

Das Programm Less  kann hier helfen. In meinem Fall gab eine PHP Web Anwendung drei unterschiedlichen CSS Klassen vor, die ich aber mit einheitlichen Attributen versehen wollte. Im Normalfall bedeutet dies, dass man dreimal dieselben Definitionen ändern müsste. Das Vorgehen mit Less ist so:

1. Man schreibt in eine Datei (am besten mit der Endung .less) die Regeln
2. Dieses Regelwerk wird mit Less in eine normale CSS Datei umgewandelt
3. Diese CSS Datei wird im HTML eingebunden

1. Regeln

vi shop.less

.kleingedrucktes {
    color: #999999;
    font-size: 11px;
    font-weight: normal;
    margin: 0;
    padding: 0;
}

.vpe { .kleingedrucktes; }
.shippingtime {.kleingedrucktes}
.taxandshippinginfo {.kleingedrucktes}

2. Umwandeln

lessc < shop.less > shop-less.css

3. Normales CSS

vi shop-less.css
.kleingedrucktes{color:#999999;font-size:11px;font-weight:normal;margin:0;padding:0;}
.vpe{color:#999999;font-size:11px;font-weight:normal;margin:0;padding:0;}
.shippingtime{color:#999999;font-size:11px;font-weight:normal;margin:0;padding:0;}
.taxandshippinginfo{color:#999999;font-size:11px;font-weight:normal;margin:0;padding:0;}