La pseudo-classe :lang La pseudo-classe :lang permet de couvrir les besoins liés à la typogra- phie et à la syntaxe de chaque langue. :lang(fr-CH) > Q { quotes: ’«’’»’’<’’>’} /*4 arguments*/ Les deux premières données concernent les guillemets et les deux dernières désignent les guillemets à l’intérieur d’autres guillemets. Le code se rpésente avec quatre arguments ou les deux premiers seulement En français de Suisse on utilise un double chevron – et un simple chevron à l’intérieur des guillemets. Pour connaître les caractères de guillemets, allez sur www.mus.ulaval.ca/roberge/gdrm/08-codes.htm. m Figure 4.29 : Langues et caractères Relooker des formulaires Double Poche CSS • 551 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Les pseudo-éléments Le pseudo-élément :first-line Le pseudo-élément :first−line s’applique à la première ligne affichée dans un paragraphe. Cette ligne est celle qui s’affiche vraiment dans le navigateur et sera donc différente selon le navigateur, la largeur affichée, la taille de la police, l’interlettrage, etc. Ce pseudo-élément ne correspond à aucune balise HTML. Pour des articles où l’auteur prévoit un chapeau sans créer une nouvelle boîte spécifique, il est possible d’utiliser ce pseudo-élément pour créer une première ligne en gras. La longueur de la première ligne dépend de l’affichage du navigateur, de la taille de la police, etc. Pour la désigner précisément, il suffit de mettre un passage à la ligne juste à la fin du chapeau avec un <br /> et d’insérer dans la feuille de style : m Figure 4.30 : Liens et langues m Figure 4.31 : Première ligne en gras 4 La réalisation du site 552 • Double Poche CSS Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. p:first-line { text-weight: bold } Dans ce pseudo-élément, il est possible de mettre toutes les propriétés de font, d’arrière-plan et toutes les propriétés concernant l’espacement de la ligne, l’interlettrage, etc. Ce procédé risque d’être envahissant, vu qu’il s’applique à tous les paragraphes. Le pseudo-élément :first-letter Cet élément spécifie les caractéristiques des lettrines. Il s’agit des premières lettres d’un paragraphe d’un corps supérieur à ce dernier et qui se tiennent sur deux, parfois trois lignes. En typographie française, les lettres suivantes sont en petites capitales. Si la lettrine commence une citation, les guillemets ouvrants viennent dans le corps du paragraphe et non dans celui de la lettrine. L’utilité de la lettrine dans une page est l’ornementation ; elle permet en outre de désigner le commencement du texte. Sur le Web, la création d’une lettrine est un casse-tête. p:first-letter { font-weight: bold; text-transform: uppercase; font-size: 200%} La première lettre des paragraphes est plus grande, plus grosse et en capitales, mais elle ne descend pas sur deux lignes, comme le fait une lettrine. La solution est donc de mettre la lettre dans une boîte flottante. .lettrine { float: left; font-weight: bold; text-transform: uppercase; font-size: 210%; margin-right: 10px; } Il reste à mettre les lettres restantes du mot en petites capitales. font-variant: small-caps; Relooker des formulaires Double Poche CSS • 553 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Le résultat est peu harmonieux et approximatif pour beaucoup d’opéra- tions. Si vous voulez absolument mettre des lettrines, insérez plutôt des images dans une boîte flottante. Les pseudo-éléments :before et :after Les pseudo-éléments :before et :after servent à insérer un objet avant ou après le contenu d’un élément. L’objet peut être un mot, une image, etc. mais pas du code HTML. Voici des pseudo-éléments très pratiques pour créer une FAQ (foire aux questions). Ces pages sont faites de questions-réponses et ici la question est surlignée en jaune avec des caractères bleus. Le problème est que Internet Explorer n’accepte pas la génération de contenu avec la propriété content. p.QR { background-color: FFEDA6; color: 003D6C; font-family: Arial; } p.QR::before { content: "Question: "; font-family: Arial; font-size: 1.1em; } p.QR::after { content: " ?"; font-family: Arial; font-size: 1.1em; } m Figure 4.32 : Lettrine 4 La réalisation du site 554 • Double Poche CSS Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Vu le problème avec Internet Explorer, il est peut-être plus judicieux de placer le point d’interrogation avec son espace à la main. Les filtres Plusieurs filtres sont à la disposition du développeur pour créer des effets sur des images ou des textes. Ils sont reconnus uniquement par Internet Explorer 4 et les versions supérieures. Ils ne peuvent donc être utilisés que s’ils ne sont pas essentiels. Ils peuvent sembler des gadgets mais certains sont intéressants pour donner un style aux images d’un site. La propriété ne fonctionne que dans une balise en ligne. Sinon, le conseil est de créer ces effets directement sur l’image avec un logiciel graphique. m Figure 4.33 : FAQ www.jardinauxpapillons.com Relooker des formulaires Double Poche CSS • 555 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. alpha Le filtre alpha crée dans l’image une transparence. Le paramètre opacity, qui contrôle l’opacité, est obligatoire : 0 correspond à la transparence maximale, et 100 à l’opacité maximale. style permet de choisir les types de dégradés : 0 pour uniforme, 1 pour linéaire et 2 pour radial. Avec style=1, pour intégrer un dégradé, il faut nécessairement indiquer une valeur de départ (startx et starty)etdefin(finishx et finishy) en pixels ou en pourcentage. <img style="filter: alpha(apacity=50, finishopacity=0, style=2, startxX=20, starty=40, finishx=0, finishy=0)" src="images/titre_ecoute_vrai_1.jpg"> shadow Ce filtre comporte deux paramètres : la couleur en code hexadécimal et la direction en degrés. L’ombre, contrairement à l’ombre portée de drops- hadow, est diffuse. filter: shadow (color=#CACACA, direction=45); dropshadow Ce filtre crée une ombre portée, comme si l’image ou le texte se tenaient au-dessus d’une surface. Cet effet donne du relief. m Figure 4.34 : alpha 4 La réalisation du site 556 • Double Poche CSS Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Il accepte quatre paramètres : ¶ la couleur de l’ombre portée ; ¶ le décalage horizontal et le décalage vertical (offX et offY); ¶ la position, dont la valeur est un booléen : 1 pour une ombre à l’extérieur, 0 pour une ombre à l’intérieur de l’élément. filter: dropshadow (color=##83838C, offX=3, offY=3, positive=1); glow Ce filtre ajoute un halo de couleur autour de l’image ou du texte. Il accepte deux paramètres : la couleur et la densité. filter: glow (color= #D7B5CF, strength=5); chroma Ce filtre permet de définir, dans une image GIF, une couleur comme transparente. <img src="image.gif" style="filter:chroma(color=#006699)" width="133" height="53" alt="image" border="0"> Selon le type de média Avec CSS2 apparaît la prise en compte du format du média visé. Tab. 4.6 : Les différents types de médias Type Application media="all" Tous les types de médias. media="aural" Synthèse vocale assistée par ordinateur. media="braille" Ce type de média est paramétré pour les aveugles. Le texte est traduit sur une surface modifiée en braille, ce qui permet aux aveugles de lire le texte. media="embossed" Le texte est pressé en relief, sur une imprimante braille, sous forme de structures de surface pouvant être reconnues au toucher sur du papier ou sur un matériau comparable, à destination des aveugles. Relooker des formulaires Double Poche CSS • 557 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Tab. 4.6 : Les différents types de médias Type Application media="handheld" Ce format s’applique à des assistants numériques, des téléphones portables et d’autres agendas électroniques. Le format est prévu pour des petits écrans. media="print" Ce format s’applique à l’imprimante quand l’utilisateur désire imprimer. media="projection" Ce format concerne les rétroprojecteurs et d’autres projecteurs vidéo. media="screen" C’est le format par défaut. Il s’applique aux écrans d’ordinateur. media="tty" Ce média concerne les sorties texte avec une largeur invariable, comme les télex. Il est aussi intéressant pour les navigateurs texte de type Lynx. media="tv" Ce format est celui de l’audiovisuel, comme la télévision, où le son et l’image se combinent. La qualité visuelle n’a pas besoin d’être parfaite. Pour les navigateurs qui n’implémentent pas CSS2, on emploie généra- lement la règle @import, qui permet d’importer les feuilles de style. Elle n’est pas reconnue par les anciens navigateurs. <html> <head> <title>Titre du fichier</title> <style type="text/css"> <!-- @import url(impression.css) print, embossed; @import url(portable.css) handheld; @import url(normal.css) screen; --> </style> </head> <body> </body> </html> 4 La réalisation du site 558 • Double Poche CSS Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. La règle @import La règle @import s’insère dans une feuille de style, qu’elle soit interne ou externe. Pour imprimer, il est préférable de gommer les couleurs et d’avoir le meilleur contraste possible entre le texte et le fond de page. Les menus ne sont pas utiles. En revanche, les liens de référence qui éclairent le propos par des pages annexes, doivent être explicites et complets. La feuille de style print doit tenir compte de tout cela. Le code qui suit est tiré du site www.ardaee.com et permet de ne pas afficher les images, d’avoir des caractères noirs sur un fond blanc, de décliner les liens en entier et en clair, de ne pas imprimer les menus de navigation, d’afficher une marge sur des navigateurs compatibles CSS2. Internet Explorer imprimera bien la page mais sans les liens en clair. De ce fait, il est utile d’insérer le nom de domaine dans le pied de page. body { color: #000; background: #fff none; font-family: arial, sans-serif; font-size: 10pt; line-height: 12pt; } #navidroite, #navigauche { display: none; } img, #titre img { display: none; } #corps { width: auto; margin: 0 5%; padding: 0; border: 0; float: none !important; color: black; background: transparent none; } .pied { margin: 3% 10%; Relooker des formulaires Double Poche CSS • 559 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. } a{ color: gray; background: transparent; font-weight: bold; text-decoration: none; } a:link:after { content: "(" attr(href) ")"; font-size: 90%; } a[href]:after { content: " (http://www.ardaee.com/" attr(href) ") "; } a[href^="http://"]:after { content: " (" attr(href) ") "; } a[href^="#"]:after { content: ""; } Les liens sont mis en gris et les liens relatifs sont transformés en absolus. Comme il n’existe pas de recherche d’un "non-motif", c’est-à-dire de mots qui ne contiennent pas le motif, l’astuce consiste à ajouter le lien directeur du site à tous les liens puis de l’enlever sur les liens externes. Le dernier sélecteur enlève les ancres qui envoient vers un point de la page elle-même. b Figure 4.35 : Prête à imprimer 4 La réalisation du site 560 • Double Poche CSS Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. [...]... seulement) Internet Explorer PC ignore le blanc souligné apposé devant une propriété Les autres navigateurs ne le prennent pas en compte et le voient comme une erreur de code .nav {_width:250px;width:200px} nav a une largeur de 200 px, sauf pour Internet Explorer PC qui voit une largeur de 250 px min-height et min-width (cachés à Internet Explorer PC et Mac) min−height et min−width, max−height et max−width... potentiels qui utilisent Internet Explorer ne pourront rien acheter car ils ne verront pas l’image qui les renseigne En effet, le sélecteur est adjacent et le pseudo-élément :after n’est pas reconnu, ni content d’ailleurs Les sélecteurs d’attribut ne sont pas reconnus par Internet Explorer : a[href|="http"] { color:#261; } Le commentaire (caché à Internet Explorer Mac seulement) Internet Explorer Mac voit l’antislash... proposées Le site est visible en 800 × 600 pixels et optimisé pour 1 024 × 768 pixels Au-dessous de la bannière principale figure une bannière de publicité, encadrée par des guirlandes de fruits et légumes qui donnent un effet de relief et cassent l’arrangement géométrique de l’ensemble Les couleurs sont printanières et se déclinent dans les verts, les jaunes et les orangés, avec une pointe de rouge (voir... Relooker des formulaires margin et padding Les marges internes et externes sont gérées différemment par les navigateurs Chacun fait sa "cuisine" pour définir les marges des éléments C’est pourquoi, dès l’entrée, il est préférable de remettre tout à 0 body { margin: 0; padding: 0; } Cette portion de code aide à positionner des éléments dans une page de manière plus précise en mettant tous les navigateurs... rédhibitoires, utilisez Internet Explorer 7 pour les gommer Il faut quand même prendre en compte le fait que certains internautes ont désactivé la fonction JavaScript sur leur navigateur Ce genre d’application est un gain de temps et permet d’utiliser par exemple les pseudo-éléments :before et :after pour créer des cadres, ou du moins de placer un haut pour les coiffer et un bas pour les chausser #cadre:before... Les liens sous le curseur On change les couleurs du texte et de fond, et on enlève le soulignement */ background-color:#EFB; color:black; text-decoration:none; } img { /* Si on met une image dans un lien (par exemple un logo à gauche du lien), pas de bordure car c’est vilain :-p */ border:none; } ssmenu img { /* un petit espacement entre l’image et le texte du lien blabla */ margin-right:2px;... police, bordure - l’effet spécial IE pour les ssmenus si on aime ça… - police et couleurs des liens "non survolés" et "survolés" */ Voilà comment il faut écrire son code Les commentaires sont dignes d’un manuel d’utilisation Un site appétissant Quand le visiteur arrive sur le site marmiton.org, tout festonné de fruits et de légumes, il a déjà l’eau à la bouche en voyant les différentes recettes proposées... Internet Explorer Mac seulement) Internet Explorer pour Mac ne voit pas l’astérisque masqué par un antislash et qui ferme le commentaire pour tous les autres navigateurs .nav {width:200px} /*IE Mac ne voit pas l’astérisque qui suit l’antislash \*//*/ nav {width:250px} /**/ nav a une largeur de 200 px, sauf pour Internet Explorer Mac qui voit une largeur de 250 px Le blanc souligné (révélé à Internet Explorer... éléments sont clairement étiquetés et donnent des indications claires à la personne chargée de maintenir le site Le site est beau, bien conçu, pensé pour séduire le visiteur par son design et la présentation du contenu, ainsi que par le ton et les différentes aides qui guident le nouveau visiteur Un site design Le site de Jérémie, www.imerege.com, est original par son design propre et clair Sa charte graphique... display: none; } Pour Internet Explorer, est un élément en ligne d’une hauteur de 7 pixels par défaut avec des padding haut et bas figés à 7 pixels Avec un Double Poche CSS • 567 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark 4 La réalisation du site display: block et une marge négative de 7 pixels, le trait est affiché correctement sur Internet Explorer . :first-letter Cet élément spécifie les caractéristiques des lettrines. Il s’agit des premières lettres d’un paragraphe d’un corps supérieur à ce dernier et qui. les lettres suivantes sont en petites capitales. Si la lettrine commence une citation, les guillemets ouvrants viennent dans le corps du paragraphe et non