Schlagwort: CSS

Less (CSS) unter macOS installieren

Der einfachste Weg Less auf einem Server zu installieren ist über npm (dem node.js Paketmanager) mit:

$ npm install -g less

Wenn nicht vorhanden: Command Line Tools für Xcode installieren

xcode-select --install

Wenn nicht vorhanden: HomeBrew installieren

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Wenn nicht vorhanden: Node.js installieren

brew install node

LessCSS installieren

sudo npm install -g less

Nun lassen sich die lessc Befehle ausführen.

CSS: inline-block und der Internet Explorer

Auch im Jahre 2012 ärgert man sich noch mit so mancher Eigenart des Internet Explorers herum. Was andere Browser (Chrome, Safari, Firefox) schon lange können, muss man dem Internet Explorer wieder gesondert beibringen. Die Rede ist diesmal von der CSS-Eigenschaft display:inline-block. Eigentlich eine schöne Sache, um bspw. einem Inline-Container feste Abmessungen (Breite, Höhe) zuzuordnen. Doch der IE scheint diese Eigenschaft nicht zu unterstützen. Für ihn gibt es NUR display:inline oder NUR display:block, aber nicht beides „zusammen“. Bevor ich aber nun weiter über den IE herziehe, hier eine mögliche Lösung:

HTML5 Boilerplate – das Grundgerüst für HTML5

HTML5 Boilerplate bietet ein kompaktes Grundgerüst zum Gestalten von Webseiten oder wie auch ich es nicht besser ausdrücken kann:

HTML5 Boilerplate ist ein professionelles HTML/CSS/JS-Template als Basis für eine schnelle, robuste und zukunftssichere Website.
Nach mehr als zwei Jahren Entwicklung, bekommt ihr das beste der besten Techniken zusammengefasst: Cross-Browser-Normalisierung, Performance-Optimierungen und sogar optionale Features wie Cross-Domain AJAX und Flash. Eine starter .htaccess-Konfigurationsdatei kommt mit praktischen Caching-Regeln, bereitet deine Seite für HTML5-Video vor und erlaubt dir einfache @font-face-Nutzung und gzip-Auslieferung deiner Ressourcen.
Boilerplate ist weder ein Framework, noch schreibt es dir eine Entwicklungsphilosophie vor. Es ist eine Sammlung von Tipps und Tricks, die dir helfen sollen, dein Projekt schnellstmöglich und flexibel auf die Beine zu stellen.

… ohne dabei eine Menge Zeit in die Anpassung einer Webseite an die verschiedensten Browser zu vergeuten. Weitere Informationen gibt es auf http://de.html5boilerplate.com/.

CSS: vertikales und horizontales Zentrieren von Inhalten

In alten HTML-Zeiten hat man Inhalte noch über Frames oder auch Tabellen auf einer Webseite, sowohl horizontal, als auch vertikal zentrieren können. Da die Gestaltung und Anordnung von Webseiten nun vorwiegend mit CSS realisiert wird, braucht man manchmal ein paar besondere Kniffe, um bspw. Elemente/Inhalte auf einer Webseite zu zentrieren.

cssHooks in jQuery

In jQuery Version 1.4.3 wurde ein neues Objekt eingeführt, welches die Definition eigener Getter und Setter für CSS-Eigenschaften ermöglicht. So lassen sich beispielsweise vereinfachte Getter/Setter erstellen, welche Box-Schatten, Gradienten oder auch runde Ecken (border-radius, -moz-border-radius, -webkit-border-radius) für verschiedene Browser handhaben.

The $.cssHooks object provides a way to define functions for getting and setting particular CSS values. It can also be used to create new cssHooks for normalizing CSS3 features such as box shadows and gradients.

Details zu Eigenschaften und Verwendung dieses Objekts sind unter
http://api.jquery.com/jQuery.cssHooks/ zu finden.

HTML-Sonderzeichen in CSS content

CSS 'content' akzeptiert keine benannten oder numerischen HTML Sonderzeichen wie © oder ©, diese können wirklich nur in HTML-Quelltext verwendet werden. Um Sonderzeichen in CSS verwenden zu können, muss man auf die Text-Darstellung in ASCII oder Unicode zurückgreifen. In CSS sieht das Ganze dann wie folgt aus:

.text:before { content:"\00a9"; }

Eine Tabelle mit allen möglichen Unicode-Zeichen (sortiert nach Blöcken) findet sich unter: http://www.fileformat.info/info/unicode/block/index.htm

CSS: min-height für alle Browser

Die CSS-Eigenschaft min-height ist recht praktisch, um die Mindesthöhe eines Elementes zu definieren, was allerdings nicht im Internet Explorer (< Version 6) so ist. Mit einem kleine Trick lässt sich dieses Verhalten aber auch im IE realisieren. Dabei wird zunächst die Eigenschaft min-height für „normale“ Browser definiert:

CSS: Blockelement in HTML5 zentrieren

Zum Zentrieren eines Blockelementes (<div>) konnte man in HTML4 noch das Attribut align verwenden:

<div align="center">
  <div>
    ...

Damit wird der zweite div-Block bei Angabe einer festen Breite innerhalb des ersten Blocks zentriert.

Mit HTML5 ist allerdings das align-Attribut für div-Elemente nicht mehr zulässig, d.h. das Zentrieren muss in HTML5 über CSS realisiert werden.