Lors de l’application d’une mise en page Web Div+CSS pour créer un site Web conforme aux normes Web, certains problèmes peuvent facilement survenir.
Résumons-le maintenant pour que chacun puisse voir où se situe le problème.
1. Problèmes de validation CSS
Les pages Web que nous concevons espèrent toutes être conformes aux normes XHTML et CSS pour passer la vérification du W3C. Certains échecs de 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 » peut 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
Les gens accordent souvent plus d’attention à la vérification CSS, mais négligent la conformité aux normes XHTML et de nombreuses erreurs de bas niveau se produisent. 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 de feuilles de style. Les fichiers de feuilles de style séparés sont plus faciles à gérer. 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 sous la forme <br />. XHTML exige que toutes les balises soient 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.
◎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) :
| Voici le contenu cité : <objet classid="clsid:27CDB6E-AE6D-11cf-96B8-444553540000" base de code= "http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" largeur="300" hauteur="100"> <param name="qualité" valeur="haute"> <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> </objet> |
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.
◎Le code similaire à id=header class=title doit être écrit 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é
Certains sites Web sont déformés et mal alignés lorsqu'ils sont consultés dans IE6.0, Mozilla Firefox1.0 et Opera 7.12.
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;
Dépasse 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".
Les standards du Web et la mise en page CSS sont compris et maîtrisés par de plus en plus de concepteurs. Après une période de digestion, de compréhension et d'application de la mise en page CSS, davantage de pages Web comportant des considérations à la fois techniques et esthétiques émergeront.