NoFollow Free!
SHIFT Weblog

Dieses Blog ist ein Online-Magazin für erfahrene Website-Entwickler und Webdesigner, die PHP und Webdesign lieben.

Kategorie: CSS

CSS, JavaScript & jQuery, Quickies

CSS-Schnittstelle für deaktiviertes JavaScript

Moderne Webseiten sind oft vollgestopft mit JavaScripts, um die Benutzerfreundlichkeit zu verbessern. Natürlich sollte eine Seite dann aber so gestaltet sein, dass sie auch ohne JavaScript funktioniert. Dabei müssen aber oft Anpassungen im Stylesheet vorgenommen werden. Das wiederum bedeutet, dass CSS-Anpassungen gemacht werden müssen, je nachdem, ob JavaScript beim Client aktiviert ist oder nicht.

Das geht ganz einfach: Wir weisen dem Markup standardmässig die Klasse “no-js” zu. Dann benötigen wir ein JavaScript, welches diese CSS-Klasse durch “js-enabled” ersetzt. Damit ist zum Beispiel folgendes möglich:

<p class="js-recommended-hint" >
     Bitte aktivieren Sie JavaScript in Ihrem Browser, um alle Features nutzen zu können!
</p>

 

.js-enabled .js-recommended-hint { display: none; }

Und wo wird die no-js-Klasse gesetzt? In das oberste Element des Markups – dem html-Element:

<html id="docroot" class="no-js">
<head>
   <!-- ... -->

Jetzt benötigen wir nur noch das Script, dass die no-js-Klasse entfernt. Das könnte man prima mit jQuery lösen:

$('html').removeClass('no-js');

Da ich ohnehin in fast jedem Projekt dieses praktische JavaScript-Framework nutze, wäre das naheliegend – hat aber einen Nachteil: Es dauert einen Moment, bis jQuery vollständig geladen ist. Das bedeutet, es gibt eine minimale Verzögerung und der Benutzer sieht für eine kurze Zeit die Version, die eigentlich für JavaScript-Verweigerer gedacht ist. Darum sollte diese Änderung mit “rohem” JavaScript durchgeführt werden:

// Cachen des html-Elementes
var _r=document.getElementById('docroot');

// Mit einem regulären Ausdruck 'no-js' durch 'js-enabled' ersetzen
_r.className = _r.className.replace(/\b\s?no-js\s?\b/,'js-enabled');

Einfach, aber wirkungsvoll.
Das Konstrukt ist Teil meines eigenen “Boilerplates” ShiftKit – entstanden aus vielen Einflüssen durch normalize.css, aber auch durch eigene Erfahrungen. Vielleicht werde ich demnächst weiteres über das Kit posten.

Nachtrag

Ralf wies mich darauf hin, dass getElementsByTagName('html')[0] sinnvoller ist:

// Cachen des html-Elementes
var _r = getElementsByTagName('html')[0]

// Mit einem regulären Ausdruck 'no-js' durch 'js-enabled' ersetzen
_r.className = _r.className.replace(/\b\s?no-js\s?\b/,'js-enabled');

CSS

Neue Informationen rund um CSS3

Wer glaubt, dass CSS3 keine Neuerungen mehr erfährt, täuscht sich. Sogar das “gute alte” CSS 2.1 ist immer noch in einem Stadium, das als nicht abgeschlossen gilt. Demzufolge ist es sehr wahrscheinlich, dass wir in Sachen CSS3 noch einige Überraschungen erleben dürfen.

Aus gleich zwei Quellen habe ich auch gleich etwas parat – für meinen Teil ist es eine absolute Neuigkeit. Ich hoffe, für euch auch.

Weiterlesen ›

CSS, Links am Rande

Links am Rande (4) – CSS only

Die Links, die ich heute vorstelle stehen ganz unter der Flagge von CSS.

  • Vorgebackene CSS3 Media-Queries für Handys und Handhelds gibt es bei stuffandnonsense.co.uk.
  • Lange war ich auf der Suche nach einer CSS-Selektorsuche, die auch seitenübergreifend funktioniert. Mit dem Firefox-Plugin CSS-Usage bin ich fündig geworden. Es ist eine Erweiterung für das nicht mehr wegzudenkende Firebug.
  • Interessant auch der Service von ProCSSor. Er verschönert den eigenen CSS-Code nicht nur, sondern komprimiert die Datei auch in verschiedenen Faktoren.
  • Ärgerlich, dass der Internet Explorer bei bestimmte CSS-Selektoren streikt, nicht? Mit etwas Javascript verspricht Selectivizr hier Abhilfe.
  • Die Website sohtanaka.com präsentiert einen kleinen Trick, mit dem die Text-Einrückung trotz float nicht flöten geht.
  • 9lessons.info verrät, wie man den zweigeteilten Inhalt, wie es ihn neuerdings auf Twitter gibt, ansprechend nachahmen kann.
  • Mal wieder was auf Deutsch: designmadeingermany erklärt den “Backgroundtrick” – genau genommen handelt es sich hierbei nicht um einen Trick, sondern um das ansehnliche Ergebnis, wenn man etwas mit z-index spielt.
  • Für Freunde von CSS-Sprites erklärt Aaron Barker die Vorzüge von diagonalen CSS Sprites.

Allgemein, CSS

Über den (Un)Sinn von CSS Frameworks

Es gibt viele gute Gründe, beim Erstellen einer Softwareapplikation ein Framework zu benutzen. Dieser Gedanke hat natürlich selbst bei den Webdesignern nicht Halt gemacht – und so gibt es beispielsweise für die serverseitige Sprachen  ASP.net und PHP (wie Zend, CodeIgniter und CakePHP) diverse Frameworks, die den Programmier-Alltag erleichtern sollen. Auch für das clientseite JavaScript existieren Frameworks wie jQuery oder MooTools.

Das es demzufolge auch irgendwann ein Framework für CSS geben muss, war fast sicher und nur eine Frage der Zeit – auch wenn bei dem Wort “Framework” die Grenzen gerne verschwimmen. Sogenannte CSS-Frameworks versprechen ein komfortableres, schnelleres Erstellen von Stylesheets oder sollen sogar dem Ersteller verhelfen, die CSS-Datei DRY zu kreiren.

Weiterlesen ›

CSS, Quickies

Formularelemente mit gleicher Höhe – so geht’s

Submit Button auf gleicher Höhe

Ich hatte heute (mal wieder) das Problem, dass in einem Formular der Submit-Button aus der Reihe getanzt ist, was die per CSS definierte Höhe betraf.

Weiterlesen ›