1. Problèmes de validation CSS
Tout d'abord, selon les exigences du concours, les candidatures doivent être conformes aux normes XHTML et les CSS soumis doivent passer la vérification du W3C. La situation de vérification CSS est idéale. Seules 8 entrées parmi les entrées ont échoué à la vérification CSS2.0. Les principales erreurs de vérification sont : "Ligne : 0 font-family : Il est recommandé de spécifier une famille de types comme dernier choix."
Le W3C recommande que lors de la définition des polices, cela se termine par une catégorie de polices plutôt que par une seule police. Par exemple, « sans-serif » est utilisé pour garantir que les polices Web peuvent être affichées sous différents systèmes d'exploitation.
Bien que la plupart des gens définissent « sans-serif » sur la balise body, si sans-serif est omis lors de la définition de la police dans d'autres identifiants ou classes, on considère que la vérification échoue. Cette erreur n’est pas très grave et peut être évitée avec un peu d’attention.
2. Suggestions d'écriture CSS
Ajoutez des commentaires aux fichiers CSS. Les commentaires apporteront de la commodité à votre future maintenance. Il est recommandé d'ajouter autant que possible des commentaires aux fichiers CSS et de ne pas vous soucier d'ajouter un petit nombre d'octets.
Essayez de raccourcir autant que possible la syntaxe CSS. Par exemple, la valeur de couleur "#FFFFFF" peut être abrégée en "#FFF" ; "padding-top:30px;Padding-right:0;padding-bottom:10px;padding-left:2 0px" peut être abrégé en " remplissage:30px 0 10px" 20px;". Il existe davantage de techniques de sauvegarde dans la définition des techniques, et à mesure que vous maîtriserez mieux les applications CSS, vous continuerez à découvrir de meilleures méthodes.
3. Problèmes de validation XHTML
Parce qu'il s'agissait d'un concours de feuilles de style, tout le monde a prêté plus d'attention à la vérification CSS, mais ils ont été un peu négligés en termes de conformité XHTML, et de nombreuses erreurs de bas niveau se sont produites. Les principaux problèmes sont énumérés ci-dessous :
target="_blank", cette syntaxe est correcte en HTML4.0, mais n'est pas autorisée en XHTML1.0. Une solution consiste à écrire target="new", et une autre solution consiste à utiliser js pour traiter toutes les cibles ;
Il est préférable de ne pas intégrer la feuille de style. Il est plus facile de gérer le fichier de feuille de style de manière indépendante. Si <style> est incorporé, il doit être écrit sous la forme <style type="text/css">, et le type ne peut pas être ignoré, sinon XHTML ne peut pas déterminer à quoi sert votre style.
<br> doit être écrit comme <br />. XHTML exige que toutes les balises doivent être fermées. Les balises non appariées doivent être directement suivies de "/".
Réutilisez le même identifiant. Un identifiant ne peut être utilisé qu'une seule fois en XHTML. Si vous devez référencer le style plusieurs fois, vous devez utiliser la classe.
<meta http-equiv="Content-Type" content="text/html; charset="gb2312" />De toute évidence, il y a un guillemet supplémentaire dans la valeur de l'attribut de contenu.
La méthode d'intégration Flash est incorrecte. <embed> était à l'origine une balise privée de Netscape Même si elle a ensuite été prise en charge par IE, elle n'a jamais été reconnue par le W3C. Il n'y a pas de balise <embed> dans HTML4.0. Le W3C préconise l'utilisation de la balise <object>. Afin de résoudre le problème de compatibilité entre les différents navigateurs, une solution de contournement consiste à utiliser les deux balises. L'exemple de code complet est le suivant (l'arrière-plan flash est 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>
Mais l'écrire directement en XHTML n'est toujours pas possible. Désormais, nous ne pouvons tromper la vérification qu'en écrivant le code ci-dessus dans le fichier flash.js puis en l'appelant.
<script type="text/javascript" src="flash.js"></script>
La question de savoir si le flash répond aux normes est une question controversée. Plus d'instructions : reportez-vous à http://www.blueidea.com/tech/site/2004/1920.asp
Les codes comme id=header class=title doivent être écrits sous la forme id="header" class="title". La citation des valeurs d'attribut est la règle de syntaxe XHTML la plus élémentaire.
4. Problèmes de compatibilité
Il y a 12 œuvres qui sont déformées et mal alignées lorsqu'elles sont visualisées dans IE6.0, Mozilla Firefox1.0 et Opera 7.12. (Je n'ai pas testé avec IE5.0, j'étais paresseux :) IE5.0 est un défi pour tous les concepteurs de mise en page CSS).
C'est centré sur IE, mais pas sur Mozilla. Définir le corps {TEXT-ALIGN: center;} dans IE peut déjà le centrer, mais dans Mozilla, vous devez ajouter les paramètres de style suivants au calque qui doit être centré : MARGIN-RIGHT : auto;MARGIN-LEFT : auto; la largeur. La page semble normale dans Mozilla, mais dans IE, elle est déformée car elle dépasse la largeur et les calques côte à côte sont déplacés en dessous. Cette situation est causée par les différentes interprétations du modèle de boîte entre IE et Mozilla. Il existe de nombreuses solutions, comme la méthode "!important".
D'une manière générale, la plupart des candidatures sont globalement qualifiées et l'objectif de ce concours a été pratiquement atteint. Les normes Web et la mise en page CSS ont été comprises et maîtrisées par de plus en plus de concepteurs. Quant à la mauvaise qualité de certaines œuvres, je pense qu'il s'agit d'un processus. Les concepteurs expérimentés devraient tous se rappeler que lorsque la mise en page Tableau est apparue pour la première fois, la plupart des pages Web étaient très simples. Après une période de digestion, de compréhension et d'application de la mise en page CSS, il y aura davantage de pages Web qui prendront en considération à la fois la technologie et l'esthétique, comme le premier prix.