Teste Dich selbst – wie gut ist Dein CSS-Know-How?
CSS-Quiz
Teste Dich selbst – wie gut ist Dein CSS-Know-How?
Heute gibt es die nächste Überraschung im Adventskalender der Webkrauts: Ein Quiz! Kennst du dich bei den CSS-Eigenschaften aus? Weißt du, was in CSS 3 neu dabei ist? Oder erkennst du falsche Schreibweisen? Die Webkrauts fordern dich mit 12 Fragen für Fortgeschrittene heraus. Viel Spaß!
Ob man wirklich Fragen beantworten muss wie "welche Eigenschaft gibt es bereits seit CSS 2.1?" lasse ich mal unkommentiert ;) Aber die restlichen Fragen sind echt top. Zumal ich nicht mal alle Fragen "richtig sicher" beantworten konnte und trotzdem gut abgeschnitten habe...
Nettes Quiz!
Ich würde allerdings bei Frage 11 nicht von "Parametern" sprechen, sondern von Werten. Und die Kaskade bezieht sich nicht auf unterschiedliche CSS-Dateien, sondern auf die Vererbung und Priorisierung unterschiedlicher Regeln auf ein Element.
Parameter und Wert kann man sicher synonym verwenden, ist wahrscheinlich Geschmackssache, ob man es eher technisch und ans Englische angelehnt haben möchte oder mit einem deutschen Wort benennen möchte. Bei 10px hat man wahrscheinlich eher das Gefühl, dass »Wert« das gleiche ist wie »Parameter«.
Die unterschiedlichen CSS-Dateien sind ein essentieller Bestandteil der Kaskade, ohne das könnte man keine zwei CSS-Dateien in einem HTML-Dokument verwenden und ohne das würde das Überschreiben von CSS-Regeln nicht möglich sein. Was die Kaskade innerhalb einer Datei im Kleinen beschreibt, beschreibt sie im Großen über viele CSS-Dateien. Und hier kommen eben auch die unterschiedlichen Stylesheet-Typen ins Spiel.
Streng genommen ermöglicht die Kaskade das Vererbungsprinzip. Die Priorisierung, also die Gewichtung ist der Hebel gegen die Kaskade, nämlich dass CSS-Regeln mit hoher Gewichtung auch nachfolgende CSS-Regeln »übertrumpfen«, auch wenn schwächere Regeln erst später bzw. weiter unten folgen.
Die »Kaskade« einfach zu erklären ist kein einfaches Unterfangen. Nicht zufällig fehlt die Erklärung der Kaskade in jedem zweiten Fachbuch ;-).
Hallo Stephan,
"Parameter" kenne ich nur als Synonym für Funktionsargument. Die CSS-Specs scheinen den Begriff auch nicht zu verwenden.
Die Kaskade kommt durchaus schon bei einem einzigen CSS-Dokument ins Spiel, wenn du etwa die Selektoren p und html p gegeneinander aufwiegst. Die unterschiedlichen CSS-Quellen (Autor, Nutzer, User Agent) sind nur das erste Gewichtungskriterium, dann kommt Spezifität und schließlich Reihenfolge der Deklarationen. Tatsächlich ist das ganz schön kompliziert zu erklären (ich hab da auch meine Erfahrungen gemacht). Wahrscheinlich ist das gerade deshalb so, weil es eigentlich intuitiv funktionieren sollte (was es überraschend oft auch tut). :-)
Viele Grüße! Herbert
Die Fragen sind immer in der gleichen Reihenfolge, spricht: bei jedem Durchlauf bleit die 1. die 1. Frage und die letzte die letzte.
Allerdings werden die Antworten bei jedem Durchlauf neu gemischt, sprich: wenn bei einer Frage die erste Antwort die richtige ist, kann es sein, dass sie beim nächsten Durchlauf an 2. 3. oder 4. Stelle steht.
PS: bei den Auswertungen wird immer nur der erste Durchlauf jedes Besuchers gespeichert. Der zweite Durchlauf wird nicht mehr gespeichert, die Gesamtauswertung sollte durch einen zweiten Versuch nicht "verfälscht" werden.
ja, Frage 12 ist schon eine richtige Nerd-Frage ;-).
Es geht darum, aus welchen Quellen CSS stammt, konkret, aus welchen Dateien. Die drei richtigen Begriffe sind feststehende Begriffe und beschreiben, wo diese CSS-Dateien zu finden sind und wie man sie nennt. Es geht darum, woher ein Browser seine Styles bezieht/beziehen kann.
Frage 4..
"Etwas wird von einem Browser nicht unterstützt? Na dann.. das wird wohl IE sein" :D
Hätte klar sein sollen, dass das ne Fangfrage ist, bei der man nicht mit der safe option beim Raten durchkommt ;)
Fand die Falle nicht mal so fies - konnte die Antwort (mit gewisser Sicherheit) herleiten. zoom bzw. *zoom kommt immer Mal wieder als IE-Hack vor um hasLayout-Probleme zu vermeiden (z.B. bei clearfix), muss daher vom IE unterstützt werden. Da Chrome und Safari (zumindest früher) Webkit basiert waren und bloß 1 Browser die Property nicht unterstützt, lässt das mit ziemlicher Sicherheit auf Firefox schließen.
Hier hätte ich fast um zuviele Ecken denken müssen. Ich denke jeder Webworker kennt *zoom: 1; um code>hasLayout in den alten IEs zu triggern. Da hab ich einen Moment überlegt, ob MS das vielleicht gedroppt hat, um zu zeigen dass sie sich mehr in Richtung Standardkonformität bewegen wollen, es dann aber verworfen, da in der Antwort ja nicht die Rede von einer bestimmten IE-Version ist. Da Safari und Chrome in den unterstützten Features meist sehr nah beeinander liegen, blieb dann nur noch Firefox, der ja auch gern mal ein wenig hinterherhinkt :)
Kommentare
Sven
am 08.12.2014 - 11:16
Ob man wirklich Fragen beantworten muss wie "welche Eigenschaft gibt es bereits seit CSS 2.1?" lasse ich mal unkommentiert ;) Aber die restlichen Fragen sind echt top. Zumal ich nicht mal alle Fragen "richtig sicher" beantworten konnte und trotzdem gut abgeschnitten habe...
wortwart
am 08.12.2014 - 12:06
Nettes Quiz!
Ich würde allerdings bei Frage 11 nicht von "Parametern" sprechen, sondern von Werten. Und die Kaskade bezieht sich nicht auf unterschiedliche CSS-Dateien, sondern auf die Vererbung und Priorisierung unterschiedlicher Regeln auf ein Element.
Stephan Heller (Autor)
am 08.12.2014 - 17:33
Hallo Wortwart,
Parameter und Wert kann man sicher synonym verwenden, ist wahrscheinlich Geschmackssache, ob man es eher technisch und ans Englische angelehnt haben möchte oder mit einem deutschen Wort benennen möchte. Bei10px hat man wahrscheinlich eher das Gefühl, dass »Wert« das gleiche ist wie »Parameter«.
Die unterschiedlichen CSS-Dateien sind ein essentieller Bestandteil der Kaskade, ohne das könnte man keine zwei CSS-Dateien in einem HTML-Dokument verwenden und ohne das würde das Überschreiben von CSS-Regeln nicht möglich sein. Was die Kaskade innerhalb einer Datei im Kleinen beschreibt, beschreibt sie im Großen über viele CSS-Dateien. Und hier kommen eben auch die unterschiedlichen Stylesheet-Typen ins Spiel.
Streng genommen ermöglicht die Kaskade das Vererbungsprinzip. Die Priorisierung, also die Gewichtung ist der Hebel gegen die Kaskade, nämlich dass CSS-Regeln mit hoher Gewichtung auch nachfolgende CSS-Regeln »übertrumpfen«, auch wenn schwächere Regeln erst später bzw. weiter unten folgen.
Die »Kaskade« einfach zu erklären ist kein einfaches Unterfangen. Nicht zufällig fehlt die Erklärung der Kaskade in jedem zweiten Fachbuch ;-).
Viele Grüße, Stephan
wortwart
am 08.12.2014 - 17:58
Hallo Stephan,
"Parameter" kenne ich nur als Synonym für Funktionsargument. Die CSS-Specs scheinen den Begriff auch nicht zu verwenden.
Die Kaskade kommt durchaus schon bei einem einzigen CSS-Dokument ins Spiel, wenn du etwa die Selektoren p und html p gegeneinander aufwiegst. Die unterschiedlichen CSS-Quellen (Autor, Nutzer, User Agent) sind nur das erste Gewichtungskriterium, dann kommt Spezifität und schließlich Reihenfolge der Deklarationen. Tatsächlich ist das ganz schön kompliziert zu erklären (ich hab da auch meine Erfahrungen gemacht). Wahrscheinlich ist das gerade deshalb so, weil es eigentlich intuitiv funktionieren sollte (was es überraschend oft auch tut). :-)
Viele Grüße! Herbert
Torben Leuschner
am 08.12.2014 - 14:06
Tolles Quiz mit hohem Schwierigkeitsgrad. Die letzte Frage habe ich jedoch auch nach mehrmaligem Lesen noch nicht verstanden ;-)
Jens Grochtdreis (Webkraut)
am 08.12.2014 - 15:55
Nicolai Schwarz (Webkraut)
am 08.12.2014 - 16:08
Sowohl die Fragen als auch die Antworten müssten eigentlich in einer zufälligen Reihenfolge erscheinen. Insofern gibt es gar keine echte letzte Frage.
Stephan Heller (Autor)
am 08.12.2014 - 16:34
Stephan Heller (Autor)
am 08.12.2014 - 16:48
Hallo Torben,
ja, Frage 12 ist schon eine richtige Nerd-Frage ;-).
Es geht darum, aus welchen Quellen CSS stammt, konkret, aus welchen Dateien. Die drei richtigen Begriffe sind feststehende Begriffe und beschreiben, wo diese CSS-Dateien zu finden sind und wie man sie nennt. Es geht darum, woher ein Browser seine Styles bezieht/beziehen kann.
Siehe auch: Die Kaskade
Ich hoffe, das hilft ein wenig, die Frage nachzuvollziehen. Viele Grüße, StephanMarco
am 08.12.2014 - 15:45
wow cooles Quiz - bin überrascht, dass ich soviel aus dem Stegreif parat hatte. :)
Jan
am 08.12.2014 - 20:23
Frage 4..
"Etwas wird von einem Browser nicht unterstützt? Na dann.. das wird wohl IE sein" :D
Hätte klar sein sollen, dass das ne Fangfrage ist, bei der man nicht mit der safe option beim Raten durchkommt ;)
Stephan Heller (Autor)
am 08.12.2014 - 22:25
;-) es geht ja hier nicht um Plattitüden-Wissen ;-)
Immerhin sind 5 von 6 in die Falle getappt... Man glaubt es kaum, dass manchmal auch der IE (wenn auch selten) die Nase vorne hat!
Nichts für ungut, das ganze soll ja Spaß machen.
Viele Grüße, Stephan
Matthias
am 09.12.2014 - 09:43
Fand die Falle nicht mal so fies - konnte die Antwort (mit gewisser Sicherheit) herleiten. zoom bzw. *zoom kommt immer Mal wieder als IE-Hack vor um hasLayout-Probleme zu vermeiden (z.B. bei clearfix), muss daher vom IE unterstützt werden. Da Chrome und Safari (zumindest früher) Webkit basiert waren und bloß 1 Browser die Property nicht unterstützt, lässt das mit ziemlicher Sicherheit auf Firefox schließen.
Frank Topel
am 22.01.2015 - 13:58
Hier hätte ich fast um zuviele Ecken denken müssen. Ich denke jeder Webworker kennt
*zoom: 1;
um code>hasLayout in den alten IEs zu triggern. Da hab ich einen Moment überlegt, ob MS das vielleicht gedroppt hat, um zu zeigen dass sie sich mehr in Richtung Standardkonformität bewegen wollen, es dann aber verworfen, da in der Antwort ja nicht die Rede von einer bestimmten IE-Version ist. Da Safari und Chrome in den unterstützten Features meist sehr nah beeinander liegen, blieb dann nur noch Firefox, der ja auch gern mal ein wenig hinterherhinkt :)Hermann
am 13.06.2015 - 01:34
Also ich kam ganz schön ins Schwitzen. Es bestätigt mein Gefühl: Im Backend bin ich sicherer..
Warum gibt's nicht so etwas wie einen "Frontend Certified Engineer" der HTML/CSS Kenntnisse bescheinigt?!
Die Kommentare sind geschlossen.