1. Probleme bei der CSS-Validierung
Gemäß den Wettbewerbsanforderungen müssen die Einsendungen zunächst den XHTML-Standards entsprechen und das eingereichte CSS muss die W3C-Verifizierung bestehen. Die CSS-Überprüfungssituation ist ideal. Nur 8 Einträge haben die CSS2.0-Überprüfung nicht bestanden. Die Hauptfehler bei der Überprüfung sind: „Zeile: 0 Schriftfamilie: Es wird empfohlen, als letzte Auswahl eine Schriftfamilie anzugeben.“
Das W3C empfiehlt, bei der Definition von Schriftarten mit einer Kategorie von Schriftarten und nicht mit einer einzelnen Schriftart zu enden. Beispielsweise wird „sans-serif“ verwendet, um sicherzustellen, dass Webfonts unter verschiedenen Betriebssystemen angezeigt werden können.
Obwohl die meisten Leute „sans-serif“ im Body-Tag definieren, wird davon ausgegangen, dass die Überprüfung fehlschlägt, wenn bei der erneuten Definition der Schriftart in anderen IDs oder Klassen „sans-serif“ weggelassen wird. Dieser Fehler ist nicht sehr schwerwiegend und kann mit etwas Aufmerksamkeit vermieden werden.
2. Vorschläge zum CSS-Schreiben
Fügen Sie Kommentare zu CSS-Dateien hinzu. Kommentare erleichtern Ihre zukünftige Wartung. Es wird empfohlen, so viele Kommentare wie möglich zu CSS-Dateien hinzuzufügen und sich keine Sorgen über das Hinzufügen einer kleinen Anzahl von Bytes zu machen.
Versuchen Sie, die CSS-Syntax so weit wie möglich zu kürzen. Beispielsweise kann der Farbwert „#FFFFFF“ als „#FFF“ abgekürzt werden; „padding-top:30px;Padding-right:0;padding-bottom:10px;padding-left:2 0px“ kann als „ padding:30px 0 10px" 20px;". Es gibt mehr Speichertechniken beim Definieren von Techniken, und je besser Sie sich mit CSS-Anwendungen auskennen, desto mehr werden Sie bessere Methoden entdecken.
3. Probleme bei der XHTML-Validierung
Da es sich um einen Stylesheet-Wettbewerb handelte, schenkten alle der CSS-Überprüfung mehr Aufmerksamkeit, wurden jedoch im Hinblick auf die XHTML-Konformität etwas vernachlässigt und es traten viele Fehler auf niedriger Ebene auf. Die Hauptprobleme sind unten aufgeführt:
target="_blank", diese Syntax ist in HTML4.0 korrekt, in XHTML1.0 jedoch nicht zulässig. Eine Lösung besteht darin, target = „new“ zu schreiben, und eine andere Lösung besteht darin, alle Ziele mit js zu verarbeiten.
Es ist am besten, das Stylesheet nicht einzubetten. Es ist einfacher, die Stylesheet-Datei unabhängig zu verwalten. Wenn <style> eingebettet ist, muss es als <style type="text/css"> geschrieben werden und der Typ kann nicht ignoriert werden, da XHTML sonst nicht bestimmen kann, wofür Ihr Stil verwendet wird.
<br> muss als <br /> geschrieben werden. XHTML erfordert, dass alle Tags geschlossen werden müssen. Auf ungepaarte Tags muss direkt ein „/“ folgen.
Dieselbe ID wiederverwenden. Eine ID kann in XHTML nur einmal verwendet werden. Wenn Sie den Stil mehrmals referenzieren müssen, sollten Sie class verwenden.
<meta http-equiv="Content-Type" content="text/html; charset="gb2312" />Offensichtlich gibt es im Inhaltsattributwert ein zusätzliches Anführungszeichen.
Die Flash-Einbettungsmethode ist falsch. <embed> war ursprünglich ein privates Tag von Netscape. Obwohl es später vom IE unterstützt wurde, wurde es vom W3C nie erkannt. In HTML4.0 gibt es kein <embed>-Tag. Das W3C befürwortet die Verwendung des <object>-Tags. Um das Problem der Kompatibilität zwischen verschiedenen Browsern zu lösen, besteht eine Lösung darin, beide Tags zu verwenden. Der vollständige Beispielcode lautet wie folgt (der Flash-Hintergrund ist transparent): <object classid="clsid:27CDB6E-AE6D-11cf-96B8-444553540000"
codebase=" http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0 "
width="300" height="100"> <param name="quality" value="high"> <param name="wmode" value="transparent">
<param name="SRC" value="test.swf"> <embed src="test.swf" wmode="transparent" quality="high"
Pluginspage=" http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash "
type="application/x-shockwave-flash" width="300" height="100"> </embed> </object>
Aber es ist immer noch nicht möglich, es direkt in XHTML zu schreiben. Jetzt können wir die Überprüfung nur überlisten, indem wir den obigen Code in die Datei flash.js schreiben und ihn dann aufrufen.
<script type="text/javascript" src="flash.js"></script>
Ob Flash den Standards entspricht, ist umstritten. Weitere Anweisungen: siehe http://www.blueidea.com/tech/site/2004/1920.asp
Codes wie id=header class=title sollten als id="header" class="title" geschrieben werden. Das Zitieren von Attributwerten ist die grundlegendste XHTML-Syntaxregel.
4. Kompatibilitätsprobleme
Es gibt 12 Werke, die bei der Anzeige in IE6.0, Mozilla Firefox 1.0 und Opera 7.12 deformiert und falsch ausgerichtet sind. (Ich habe nicht mit IE5.0 getestet, ich war faul :) IE5.0 ist eine Herausforderung für alle CSS-Layout-Designer.)
Es ist im IE zentriert, aber nicht in Mozilla. Das Festlegen des Körpers {TEXT-ALIGN: center;} im IE kann ihn bereits zentrieren, aber in Mozilla müssen Sie der Ebene, die zentriert werden muss, die folgenden Stileinstellungen hinzufügen: MARGIN-RIGHT: auto;MARGIN-LEFT: auto überschreitet; die Breite. Die Seite sieht in Mozilla normal aus, aber im IE ist sie deformiert, weil sie die Breite überschreitet, und die nebeneinander liegenden Ebenen werden darunter verschoben. Diese Situation wird durch die unterschiedliche Interpretation des Box-Modells zwischen IE und Mozilla verursacht. Es gibt viele Lösungen, wie zum Beispiel die Methode „!important“.
Im Allgemeinen sind die meisten Einsendungen insgesamt qualifiziert und der Zweck dieses Wettbewerbs wurde im Wesentlichen von immer mehr Designern verstanden und beherrscht. Was die schlechte Kunst einiger Werke angeht, denke ich, dass dies ein Prozess ist, an den sich alle erinnern sollten, als das Tabellenlayout zum ersten Mal erschien, waren die meisten Webseiten sehr einfach. Nach einer Zeit des Verdauens, Verstehens und Anwendens des CSS-Layouts wird es weitere Webseiten geben, die sowohl Technologie als auch Ästhetik berücksichtigen, wie zum Beispiel der Beitrag zum ersten Preis.