Share
CSS ist eine relativ einfache zu lernende Sprache. Auf der anderen Seite zu meistern, kann sich als etwas schwieriger erweisen. Wenn Sie verschiedene Browser-Inkonsistenzen ausgleichen, kann dies zu Migräne führen. In diesem Artikel werden fünf der wichtigsten Probleme beschrieben, die beim Erstellen von Webanwendungen auftreten.
Das haben wir alle gemacht. Sie denken sich: "Wow, dieser Text würde gut aussehen, wenn er hellrot wäre." (wirklich ??) Wenn Sie das erforderliche Styling hinzufügen, bleibt Ihr Text leider schwarz. Woher?
Es gibt einige Gründe, warum Ihre Stile nicht wirksam werden. Unnötig zu sagen, dass dies ein unangenehmes Problem sein kann - insbesondere für Anfänger von CSS-Entwicklern. Besuchen Sie zunächst Ihre CSS-Datei und stellen Sie sicher, dass keine Tippfehler vorhanden sind. Ich habe viele Stunden damit verbracht, meine Dokumente zu demontieren, nur um herauszufinden, dass ich ein Wort falsch geschrieben habe. Wenn Sie jedoch nicht schon einmal den Kopf gegen die Wand geschlagen haben, dürfen Sie sich nicht Webentwickler nennen! Höchstwahrscheinlich haben Sie es mit einem Spezifitätsproblem zu tun. Versuchen Sie, "!wichtig"Neben dem Stil, der sich nicht auswirkt. Wenn er plötzlich funktioniert, bedeutet das, dass Sie definitiv ein Gewichtsproblem haben. Aus guten Gründen sollten Sie"! important "niemals in Ihrem Stylesheet lassen. Verwenden Sie es einfach als Eine Möglichkeit zum Debuggen. Betrachten Sie das folgende Beispiel:
#wrap #myStyle color: black;
Da hier eine größere Spezifität vorliegt, bleibt die Farbe schwarz. Durch das Hinzufügen des zusätzlichen Bezeichners "#wrap" wird dieser Selektor stärker gewichtet. Folglich wird der erste Stil zugunsten dieses Stils außer Acht gelassen.
Wie können wir dieses Problem lösen?? Sie sollten zuerst prüfen, ob der zweite Stil vollständig gelöscht werden kann. Wenn dies nicht der Fall ist, müssen Sie Ihrem ursprünglichen Selektor einfach mehr Details hinzufügen. Wir gehen in Kürze auf das Konzept der Spezifität ein. Versuchen wir folgendes hinzuzufügen:
#wrap p # myStyle color: red;
Nun wird der Text endlich rot. Durch das Hinzufügen des zusätzlichen "p" -selektors haben wir einen weiteren Punkt hinzugefügt, wodurch jedes andere Styling überschrieben wird.
Vielleicht mehr als alles andere ist die Positionierung ein unnötig verwirrendes Thema für Anfänger und CSS-Designer. Der beste Weg zu lernen ist, zuerst die absolute Positionierung in Angriff zu nehmen. Nehmen wir an, wir haben ein leeres HTML- und CSS-Dokument. Wenn wir dann ein Bild absolut auf der Seite platzieren würden - etwa 100 Pixel von oben und 100 Pixel von der linken Seite des Fensters -, könnten wir den folgenden Stil schreiben ...
img position: absolut; oben: 100px; links: 100px;
Absolut positionierte Elemente werden in Bezug auf ihre nächstgelegenen übergeordneten Elemente positioniert. In diesem Fall wird das Bild in Bezug auf das Fenster positioniert, wenn keine relativ positionierten Elemente auf der Seite vorhanden sind.
Stellen Sie sich nun vor, wir hätten ein relativ positioniertes Div um unser Bild gelegt.
Um einen Positionierungskontext festzulegen, müssen wir dem Stil unseres übergeordneten div-Objekts "position: relative" hinzufügen.
div # wrapper position: relativ; Hintergrund: grau; / * Nur um die Grenzen zu sehen. * / Height: 600px; / * Da das Bild absolut positioniert ist, müssen wir die Höhe erzwingen. * / Width: 770px; Marge: auto;
Wenn wir nun das Bild absolut positionieren, wird es relativ zur "Wrapper" -Division positioniert. Wenn Sie diese Eigenschaft entfernen, wird das Bild erneut in Relation zum Browserfenster gesetzt. Die Eigenschaft "Position" ist hier entscheidend.
Chris Coyier führt einige praktische Beispiele an, die genau zeigen, wie und wann Positionierungen verwendet werden. Enthält eine Demo und einen herunterladbaren Quellcode.
Artikel besuchen
"Lassen Sie uns ein wenig Licht in die geheimnisvollen Geheimnisse der CSS-Positionierung bringen. Wenn Ihre CSS-Fähigkeiten begrenzt oder sogar moderat sind, werden Sie lernen, was Sie zum Positionieren benötigen."
Artikel besuchen
Für diejenigen, die mit dem "Double-Margin-Fehler" nicht vertraut sind: Wenn Sie ein Element schweben lassen und dann zum Hinzufügen von Rändern in dieselbe Richtung wie der Float vorgehen, verdoppelt Internet Explorer 6 den Wert falsch. Tatsächlich wird ein linker Rand von "100px" in IE6 zu "200px". Es gibt drei verschiedene Mittel, die wir überprüfen werden.
Ändern Sie die Anzeige in Inline. Die einfachste Lösung, die von Steve Clason entdeckt wurde, besteht darin, die Anzeigeeigenschaft Ihres Elements zu ändern.
#floatElement Anzeige: Inline; Schwimmer: links; Rand links: 100px;
Bedingte Kommentare verwenden. Glücklicherweise wird durch das Ändern der Anzeige dieser böse Fehler behoben. Was aber, wenn Sie aus irgendeinem Grund eine andere Methode benötigen? Mit Internet Explorer können Sie verschiedene Browserversionen mithilfe von "bedingten Kommentaren" anvisieren. Fügen Sie Folgendes in das head-Tag Ihres Dokuments ein:
In Laien ausgedrückt bedeutet dieser Code: "Wenn ein Besucher Ihrer Seite Internet Explorer 6 oder niedriger verwendet, importieren Sie ein Stylesheet mit dem Namen" ie6.css ". Moderne Browser ignorieren diese Anweisung. IE 6 und darunter Auf der anderen Seite wird die Datei implementiert. Nun müssen wir in unserer ie6.css-Datei etwas Override-Styling hinzufügen.
#floatElement float: left; Rand links: 50px;
Da wir wissen, dass der IE 6 die Margen bei Floated-Elementen verdoppelt, wird der Wert der Marge um 50% reduziert, wodurch das Dokument korrigiert wird. Diese Methode ist besonders geeignet, wenn Sie viele Stile haben, die direkt auf IE6 abzielen. Es ist wichtig, alle Ihre "Hacks" an einem zentralen Ort zu speichern.
Implementiere den Underscore-Hack. Es gibt viele Möglichkeiten, ältere Versionen von Internet Explorer direkt von unserem primären Stylesheet aus anzusprechen. Generell bevorzuge ich bedingte Kommentare. Wenn ich jedoch nur eine einzige Eigenschaft ändern muss, verwende ich oft den Unterstrich-Hack. Betrachten Sie folgendes:
#floatElement float: left; Rand links: 100px; _margin-left: 50px;
Moderne Browser werden diese Eigenschaften durchlaufen. Wenn sie zum Unterstrich kommen, überspringen sie den Stil vollständig. Auf der anderen Seite ignoriert der IE6 den Unterstrich und implementiert die neuen Ränder. Was wir am Ende erreichen, ist, dass moderne Browser am linken Rand "100px" hinzufügen. IE 6 wird jeweils nur "50px" hinzufügen.
Dustin bietet eine kurze Erklärung für die Behebung dieses Fehlers. Schauen Sie sich auch die zugehörigen Tutorials an.
Artikel besuchen
Stellen Sie sicher, dass Sie diesen leicht lesbaren Artikel lesen, wenn Sie immer noch etwas verwirrt sind.
Artikel besuchen
Absolut! Nur wenige Menschen kennen die exakte Gleichung. Viele von Ihnen gehen wahrscheinlich von der Methode "Fügen Sie weitere Bezeichner hinzu, bis es funktioniert". Praktisch wird dies gut funktionieren. Sie sollten jedoch wissen, wie Sie das Gewicht Ihrer Selektoren trotzdem berechnen können.
Zuerst verknüpfen wir jeden Selektortyp mit einem Wert.
Versuchen wir, das Gewicht des folgenden Stils zu berechnen…
body #wrap div # sidebar ul li a.selected zufälliges Styling…
In Bezug auf unseren Rechner oben analysieren wir diesen Selektor. Das Körperelement erhält einen Punkt. Als nächstes haben wir eine Kennung (#wrap). Dadurch werden 100 Punkte zur Zählung hinzugefügt. Weiter geht es mit "div # sidebar". Wie viele Punkte glauben Sie, dass dies wert ist? Wenn Sie 100 Punkte erraten haben, sind Sie falsch. Sie müssen das "div" -Element in Ihr Gewicht einbeziehen. Die richtige Antwort lautet 101 Punkte. Die Elemente "ul", "li" und "a" erhalten einen Punkt pro Stück. Zuletzt erhält die "ausgewählte" Klasse zusätzlich 10 Punkte. Addieren wir alles zusammen, kommen wir zu einer Summe von 215.
Ich empfehle Ihnen, einige Minuten zu verbringen und sich dieses Punktesystem zu merken. Es erspart Ihnen viel Zeit, wenn Sie sich in einem Dilemma der Spezifität befinden!
Für eine ausführliche Erklärung der Spezifität empfehle ich Ihnen dringend, diesen Artikel von oben nach unten zu lesen.
Artikel besuchen
Lernen Sie die Kunst der Spezifität in einer unterhaltsamen "Star Wars" -Einstellung. Dies ist ein Muss zu lesen.
Artikel besuchen
Wenn Sie an einer Site arbeiten, müssen Sie sie in jedem modernen Browser überprüfen: Firefox, Internet Explorer, Safari und Opera. Schritt zwei besteht darin, Ihre Site in einer älteren Version des IE zu testen. Ich empfehle Ihnen, den IE Tester herunterzuladen, mit dem Sie Ihre Website in IE 5 - IE 8 anzeigen können. Der letzte Schritt besteht darin, alle weniger verbreiteten Browser zu überprüfen. Besuchen Sie BrowserShots.org, um Momentaufnahmen Ihrer Website in jedem verfügbaren Browser anzuzeigen.
Hassen Sie es nicht, beim Testen Ihrer Website zwischen IE und Firefox wechseln zu müssen? Warum nicht IE Tab herunterladen?
Artikel besuchen
Irgendwelche verwirrenden Fragen, die ich vermisst habe? Ich bin mir sicher, dass es viele gibt. Hinterlasse einen Kommentar und ich werde versuchen, sie in Teil zwei zu integrieren. Ich hoffe, diese "Frage und Antwort" -Artikel in eine fortlaufende Serie zu verwandeln.
Accentsconagua
