ʫ

Sie haben den Artikel erfolgreich in den Warenkorb gelegt.
Was möchten Sie als nächstes tun?

Weiter einkaufen Zur Kasse

ȭ
CSS Klassen

Inline CSS Befehle für media queries neu definieren

CSS ist eine sehr schöne Sache und bei CSS3 haben wir eine enorme Flexibilität. Mit CSS kann man schnell und einfach alles Mögliche stylen, ohne sich dabei großartig mit Programmiersprachen auszukennen. Wenn eine Website wächst und viele CSS Klassen schon vorhanden sind, gerät man automatisch in die Situation, diese dann so zu definieren, dass so wenig Klassen wir möglich genutzt werden, damit diese sich vererben.

Vererbung von CSS Klassen und Prioritäten bei der Eingabe

In CSS ist die Reihenfolge wichtig, denn man kann eine Klasse definieren und in der nächsten Zeile diese dann wieder neu definieren, jedoch in Verbindung mit einem bestimmten Bereich oder HTML Element auf der Website. Man muss aber auch sagen, dass bei einer Vererbung, die Klassen sehr schlecht zu lesen sind. Stößt man zufällig auf Eine, kommen die Entwicklertools der Browser zur Stelle, womit schnell erkannt wird, welche Klassen ein Element geerbt haben, um die endgültige Form und Darstellung zu erhalten. Jedoch ist es ja möglich, eine CSS Klasse zu definieren und dann gleichzeitig eine weitere CSS Anweisung inline, also im Quellcode selbst, einzugeben. Dann nimmt die inline Anweisung immer die, mit der höchsten Priorität, wie folgt:

.mein_button {font-size: 11px; padding: 10px;}
< input class="mein_button" style="font-size: 13px;" type="button" />

In diesem Beispiel haben wir sowohl eine CSS Klasse, als auch inline CSS Befehle im Quellcode. An dieser Stelle wird der Button mit "padding" von 10 Pixel und einer Schriftgröße von 13 Pixel dargestellt, denn die inline Anweisung hat Vorrang. Aber was passiert, wenn man auch die inline CSS Befehle überschreiben möchte, z.B. wenn man mit media queries für Responsive Design arbeitet?

 

Inline CSS Befehle für media queries und Responsive Design überschreiben

Wenn Sie Ihre Seite als Responsive programmieren können, werden Sie über die media queries stolpern - eine sehr feine und elegante Art die CSS Klassen für verschiedene Displaygrößen zu überschreiben. Jedoch werden Sie schnell feststellen, dass wenn Sie eine bestimmte Klasse neu definieren oder wenn Sie einem Element eine neue CSS Eigenschaft vergeben, können Inline CSS Befehle nicht überschrieben werden. Das liegt daran, dass die Klassen, die unter den media queries definiert werden, sich von der Wichtigkeit her dem inline Befehl unterordnen, genauso wie Ihre Originalklassen in der CSS Datei. Dies können Sie mit der Anweisung !important umgehen:

@media only screen and (min-width: 1280px) and (max-width: 1659px) {
  .mein_button {font-size: 9px !important;}
}

Damit können Sie mit Responsive problemlos arbeiten und alle Feinheiten anpassen. Viel Spass!

û