Share
Die Arbeit mit CSS kann wie ein ständiger Kampf erscheinen. Browser ändern sich immer so, wie sie den Code lesen (* hust * Internet Explorer * hust *), und es scheint, dass es viele kleine CSS-"Gotchas" gibt. Obwohl es eine unglaublich mächtige Sprache ist, kann sie leicht falsch verwendet werden, was Ihre Entwicklung zu einem Leben voller Unvollkommenheiten verurteilen wird.
Dies ist wahrscheinlich das Hauptproblem bei der Webentwicklung, da Layouts gleich aussehen müssen, unabhängig davon, welchen Browser der Websitebesucher zum Navigieren auf der Seite verwendet. Diese Tatsache erscheint manchmal als Fluch Ihrer Existenz: Es gibt grundlegende Unterschiede in der Art und Weise, wie Internet Explorer eine Seite darstellt, im Vergleich zu Firefox. Es ist zwar nicht so schlimm wie sie gebraucht zu sein, es gibt immer noch einen großen Unterschied zwischen den Browsern.
Es ist für Webentwickler einfach, die Seite in ihrem bevorzugten Browser zu gestalten und sich keine Gedanken darüber zu machen, wie sie in anderen großen Browsern aussieht, da die Unterschiede höchstwahrscheinlich nicht wahrgenommen werden. (Ich bin ein schwerwiegender Straftäter. Ich werde die Website manchmal in Firefox entwerfen und das Einchecken des Internet Explorer erst dann vergessen, wenn es fertig ist Um sicherzustellen, dass alles konstant aussieht, verwenden Sie einfach Browsershots. Browsershots liefert eine genaue Momentaufnahme, wie Ihre Website auf vielen verschiedenen Plattformen und Browsern aussieht. So können Sie sicherstellen, dass nichts in einem Browser funky aussieht.
Viele von uns Webentwicklern haben zwar große Computermonitore - und sind ziemlich stolz auf die Tatsache -, dass ein großer Teil der Besucher Ihrer Website dies möglicherweise nicht tut. Sie können Ihre Analyseprogramme überprüfen, um die Browser-Auflösungen Ihres Besuchers und deren Reichweite zu sehen (Google Analytics tut dies wunderbar). Es gibt jedoch Welten, in denen ein Design in einer Auflösung von 1024x768 im Gegensatz zu einer Auflösung von 800x600 anders aussieht. Es kann ein schönes Design fast unbrauchbar machen.
Ich bin kürzlich auf diese Erkenntnis gestoßen, als ich das Design für Trendfo verfeinerte. Ein großer Teil der Besucher der Website verwendete kleinere Browser, was dazu führte, dass ein Image einige Anzeigen teilweise blockierte, was zu weniger Klicks und letztendlich zu weniger Einnahmen auf der Website führte.
Die Berücksichtigung kleinerer Browser bedeutet dies alles Ihrer Besucher sind glücklich und finden die Informationen, die sie benötigen.
Wenn Sie ein CSS-Layout von Grund auf entwickeln, möchten Sie sich vielleicht fragen, warum. So wie nichts unter der Sonne neu ist, gilt dies auch für CSS. Es gibt viele CSS-Frameworks wie das Blueprint-Framework und das 960-CSS-Framework. Diese werden erstellt, um Sie bei der Erstellung kugelsicherer Layouts zu unterstützen, ohne etwas von vorne anfangen zu müssen. Diese Layouts sind Cross-Browser-kompatibel und wurden streng getestet. Wirklich, verwenden Sie einfach ein CSS-Framework, wenn Sie nicht etwas völlig radikales tun, das eine Vielzahl von benutzerdefiniertem Code benötigt.
Warum das Rad neu erfinden??
Es kann ziemlich einfach sein, bei der Entwicklung von Websites nicht an die Zukunft zu denken. Oft benennen wir unsere CSS-Klassen jedes Mal, wenn wir eine Website entwickeln, anders, als eine einfache CSS-Klasse zu erstellen, die wir in unserem gesamten Design immer wieder verwenden können, ohne das, was wir zuvor verwendet haben, herauszufinden. Dadurch wird sichergestellt, dass unser Website-Design während der Änderungen eines Designs konstant bleibt.
Sie könnten eine generische Klasse wie:
(Anmerkung des Editors: Die doppelten "Rechte" sind das Ergebnis eines Fehlers in unserem Code-Viewer, korrekter Code ist natürlich .right float: right.)
.Right Float: Right
Um die Dinge in die richtige Richtung zu bewegen, wann immer Sie möchten. So können Sie die DIV-ID wie folgt gestalten:
Ich verwende normalerweise mindestens drei generische Klassen, wenn ich ein Website-Design baue:
.clear clear: both .right float: right .left float: left
Ich wette, Sie wussten nicht, dass die Validierung Ihres HTML-Codes auch Ihr CSS beeinflussen kann, oder? Nun kann es. In erster Linie können Sie Ihr CSS erst dann validieren, wenn Sie über gültiges HTML verfügen. Zweitens gibt es viele Fälle, in denen Ihr HTML-Code Ihre Probleme anstelle von CSS verursacht. Oft denken wir, dass unser CSS das Layout ändert, obwohl es ein bisschen missformter HTML-Code ist, der das Layout funky macht. Ein nicht geschlossener DIV hier, eine falsch etikettierte CSS-Klasse ... es könnte alles sein. Stellen Sie sicher, dass Ihr HTML ausgecheckt ist, bevor Sie sogar versuchen, ein CSS-Problem zu diagnostizieren.
Ich bemühte mich ständig, einen Freund um Hilfe bei CSS-Problemen zu bitten, als ich versuchte, meine Designs zu entwirren. Er würde mich jedes Mal geduldig fragen: "Validiert das CSS? Wenn nicht, was sind die Fehler?" Es dauerte nicht lange, bis ich gelernt hatte, das CSS zu validieren, bevor ich Thomas später um Hilfe bat. Normalerweise hat das Validieren das Problem für mich behoben.
Wenn Sie über gültigen CSS-Code verfügen, haben Sie mit größerer Wahrscheinlichkeit ein CSS, das von Browsern viel besser kompatibel ist und weniger wahrscheinlich beschädigt wird.
Oft verwenden neue Designer übergroße Hintergrundbilder in ihren Layouts. Verwenden Sie beispielsweise ein 3.000px X 5.000px-Hintergrundbild, um dies zu berücksichtigen möglich Browsergröße. Anstatt ein wirklich großes Bild zu verwenden, könnten sie ein wirklich kleines, sich wiederholendes Bild mit einem Hauch von CSS-Magie verwenden. Der Unterschied ist enorm: Statt ein 200-KB-Bild zu laden, können Sie ein Bild mit einer Größe von nur wenigen Bytes laden und das CSS es über den Hintergrund wiederholen lassen.
Wenn Sie ein Hintergrundbild haben, das sehr groß ist, verlieren Sie zwei Möglichkeiten:
Große Hintergrundbilder sind manchmal unvermeidlich, insbesondere beim aktuellen Trend zur Gestaltung illustrativer Weblayouts. Die Verwendung von sich wiederholenden Bildern oder Volltonfarben im Hintergrund ist jedoch viel besser.
Wenn Menschen erst einmal etwas über eine Technologie erfahren, werden sie davon begeistert und möchten sie überall einsetzen, auch wenn sie tatsächlich gegen das kämpfen kann, was für das Projekt am besten geeignet ist.
Als Webentwickler können wir uns manchmal mit dem Wunsch beschäftigen, dass die Technologie etwas Fortgeschrittenes und Spezielleres tun soll, obwohl wir eine andere Technologie viel einfacher einsetzen können. Zum Beispiel ist es manchmal viel einfacher, eine Tabelle zum Organisieren von Daten zu verwenden, als ein kompliziertes CSS-basiertes Layout mit gleitenden DIVs und dergleichen zu erstellen. Wir müssen uns daran erinnern, dass wir Technologien wie CSS verwenden, weil sie es sind sollte Entwicklungszeit beschleunigen. Wenn es beginnt, uns zu verlangsamen, gehen wir vielleicht ein wenig über Bord.
Dies ist eine Hauptsünde für Webentwickler, und es passiert mehr, als Sie möchten. Wenn Sie einen Entwurf erstellen, sind Sie fast fertig immer Ich möchte CSS und HTML getrennt halten. Dadurch wird sichergestellt, dass Sie (wenn ich nicht "Wenn" gesagt habe, das Site-Design ändern möchten), nicht durch den HTML-Code jedes Layouts graben und das an ein Inline-Element angehängte schädliche CSS finden müssen.
Anstelle dieses zu verwenden:
Verknüpfung
Sie sollten das Style-Business auf ein externes Stylesheet verschieben, z.
Verknüpfung
Inline-CSS sollte fast immer vermieden werden. Es ist einfach zu bedienen und eignet sich hervorragend zum Testen, aber ansonsten möchten Sie es wahrscheinlich nicht in Ihrem Produktionscode.
Haben Sie schon einmal ein Design mit 12 verschiedenen CSS-Dateien gesehen? Es ist ein Albtraum für alle, die versuchen, Änderungen an Ihrem Layout vorzunehmen. Außerdem wird die Verarbeitungszeit für jede Datei verlangsamt, da der Browser für jede einzelne Datei eine Anforderung stellen muss. Es ist besser, ein einfaches CSS-Schema zu verwenden, das 1 oder 2 Dateien verwendet. Die Zeit, die für das Analysieren von 12 Dateien im Vergleich zu einer einzelnen Datei aufgewendet wird, ist von erheblicher Bedeutung. Nicht nur das, Sie sparen den nächsten Mann, der viele Änderungen an Ihrem Layout vornehmen muss.
Niemand möchte 12 Dateien öffnen, um eine einfache, standortweite Änderung vorzunehmen!
Glen Stansberry ist ein Webentwickler und Blogger, der sich mehr Mühe bereitet, als er mit CSS zugeben möchte. Weitere Tipps zur Webentwicklung finden Sie in seinem Blog Web Jackalope.
Mochte diesen Beitrag Stimmen Sie auf Digg unten ab. Vielen Dank!
Accentsconagua