Tài liệu MySQL et CSS- P12 doc

Pour la désigner précisément, il suffit de mettre un passage à la ligne juste à la fin du chapeau avec un et d’insérer dans la feuille de style : m Figure 4.30 : Liens et langues m Figur

La pseudo-classe :lang

La pseudo-classe :lang permet de couvrir les besoins liés à la phie et à la syntaxe de chaque langue

typogra-:lang(fr-CH) > Q { quotes: ’« ’ ’ »’ ’<’ ’>’} /*4 arguments*/

Les deux premières données concernent les guillemets et les deuxdernières désignent les guillemets à l’intérieur d’autres guillemets Lecode 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

Les pseudo-éléments

Le pseudo-élément :first-line

Le pseudo-élément :first−line s’applique à la première ligne affichéedans un paragraphe Cette ligne est celle qui s’affiche vraiment dans lenavigateur 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 ó l’auteur prévoit un chapeausans créer une nouvelle boỵte spécifique, il est possible d’utiliser cepseudo-élément pour créer une première ligne en gras La longueur de lapremière ligne dépend de l’affichage du navigateur, de la taille de lapolice, 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

p:first-line { text-weight: bold }

Dans ce pseudo-élément, il est possible de mettre toutes les propriétés defont, d’arrière-plan et toutes les propriétés concernant l’espacement de laligne, l’interlettrage, etc Ce procédé risque d’être envahissant, vu qu’ils’applique à tous les paragraphes

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 encapitales, mais elle ne descend pas sur deux lignes, comme le fait unelettrine

La solution est donc de mettre la lettre dans une boîte flottante

.lettrine { float: left;

Le résultat est peu harmonieux et approximatif pour beaucoup tions Si vous voulez absolument mettre des lettrines, insérez plutôt desimages dans une boîte flottante.

d’opéra-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, uneimage, etc mais pas du code HTML

Voici des pseudo-éléments très pratiques pour créer une FAQ (foire auxquestions) Ces pages sont faites de questions-réponses et ici la questionest surlignée en jaune avec des caractères bleus Le problème est queInternet 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 {

Vu le problème avec Internet Explorer, il est peut-être plus judicieux deplacer le point d’interrogation avec son espace à la main.

Les filtres

Plusieurs filtres sont à la disposition du développeur pour créer des effetssur des images ou des textes Ils sont reconnus uniquement par InternetExplorer 4 et les versions supérieures Ils ne peuvent donc être utilisés ques’ils ne sont pas essentiels Ils peuvent sembler des gadgets mais certainssont 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éerces effets directement sur l’image avec un logiciel graphique

m Figure 4.33 : FAQ www.jardinauxpapillons.com

Le filtre alpha crée dans l’image une transparence Le paramètreopacity, qui contrôle l’opacité, est obligatoire : 0 correspond à latransparence maximale, et 100 à l’opacité maximale

stylepermet de choisir les types de dégradés : 0 pour uniforme, 1 pourlinéaire et 2 pour radial

Avec style=1, pour intégrer un dégradé, il faut nécessairement indiquerune valeur de départ (startx et starty) et de fin (finishx et finishy)

filter: shadow (color=#CACACA, direction=45);

dropshadow

Ce filtre crée une ombre portée, comme si l’image ou le texte se tenaientau-dessus d’une surface Cet effet donne du relief

m Figure 4.34 : alpha

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);

<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

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.

Tab 4.6 : Les différents types de médias

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, ó 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 lement la règle @import, qui permet d’importer les feuilles de style Ellen’est pas reconnue par les anciens navigateurs

<! @import url(impression.css) print, embossed;

@import url(portable.css) handheld;

@import url(normal.css) screen;

de ne pas imprimer les menus de navigation, d’afficher une marge sur desnavigateurs compatibles CSS2 Internet Explorer imprimera bien la pagemais sans les liens en clair De ce fait, il est utile d’insérer le nom dedomaine dans le pied de page.

body { color: #000;

} img, #titre img { display: none;

}

#corps { width: auto;

a { color: gray;

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 motsqui 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 derniersélecteur enlève les ancres qui envoient vers un point de la pageelle-même

b Figure 4.35 :

Prête à imprimer

Bidouillages et défaillances autour d’Internet Explorer

Cependant, la venue d’Internet Explorer 7, qui ajoute encore de lacomplexité sans apporter de la conformité, va compliquer davantage ledéveloppement des sites Il faut espérer que ce navigateur perde des parts

de marché au profit de Firefox ou d’autres navigateurs compatibles poursimplifier le développement des sites

Le problème des bidouillages de la feuille de style est que celle-ci n’estplus conforme et peut amener des bogues avec les navigateurs du futur

Mac ou PC

Les versions Mac et PC d’Internet Explorer ont été créées par deux équipes indépendantes, qui ont donc produit deux logiciels différents.

Le sélecteur * html (révélé à Internet Explorer PC seulement)

Ce sélecteur représente la balise html comme descendant d’un élémentquelconque, ce qui est une sélection impossible car la balise html estl’élément racine des pages HTML Un navigateur normal ignore cesélecteur car il ne correspond à rien Internet Explorer lui en tient compte

div#corps { position: absolute;

}

Le problème avec Internet Explorer est que, si la propriété width n’est pasprésente, la largeur n’a plus de limites Ici le sélecteur * html div#corpsn’est reconnu que par lui.

Le sélecteur enfant, adjacent ou le sélecteur d’attribut (caché à Internet Explorer PC seulement)

Pour cacher certaines règles à Internet Explorer PC, il suffit d’utiliser lesélecteur enfant qu’il ne reconnaît pas

html >body div#corps { max-width: 600px;

}

Ici, il ne reconnaît pas la propriété max−width, mais elle lui est cachée par

la présence du caractère>, qui désigne un sélecteur enfant

td+td+td:after { content:url(acheter.png);

}

Ici, les acheteurs potentiels qui utilisent Internet Explorer ne pourront rienacheter car ils ne verront pas l’image qui les renseigne En effet, lesélecteur est adjacent et le pseudo-élément :after n’est pas reconnu, nicontentd’ailleurs

Les sélecteurs d’attribut ne sont pas reconnus par Internet Explorer :

a[href|="http"] { color:#261;

extensible selon la définition de l’écran de l’internaute Or InternetExplorer les ignore, ce qui pose des problèmes pour la mise en page avecdes colonnes sous forme de boîtes.

Une solution consiste à utiliser une image de fond pour avoir une hauteur

ou une largeur minimale Il est aussi intéressant de mettre un width ou unheightdans un sélecteur qui est vu uniquement par Internet Explorer.Reprenons le premier exemple de cette section

div#corps { position: absolute;

}

Pour remédier au fait que Internet Explorer ignore la propriétémin−height, la solution consiste en un ensemble de deux conteneurs, l’undans l’autre Le conteneur extérieur a un padding équivalent à cettehauteur minimale requise et le conteneur intérieur est doté d’une margenégative équivalente

<style type="text/css">

#out-min-height { padding-top:200px;

margin et padding

Les marges internes et externes sont gérées différemment par les teurs Chacun fait sa "cuisine" pour définir les marges des éléments C’estpourquoi, dès l’entrée, il est préférable de remettre tout à 0

naviga-body { margin: 0;

padding: 0;

}

Cette portion de code aide à positionner des éléments dans une page demanière plus précise en mettant tous les navigateurs sur le même réglage.Sinon les marges par défaut des différents navigateurs vont fausserl’affichage

Internet Explorer 7

Internet Explorer 7 est un projet dirigé par Dean Edwards, qui consiste enune bibliothèque JavaScript compensant les manques d’Internet Explorer.Ces caractéristiques sont les suivantes :

¶ Il répond aux sélecteurs CSS suivants :

− parent> enfant ;

− frère + adjacent ;

− frère ~ adjacent ;

− [attr], [attr="valeur"], [attr~="valeur"]…

− Classes multiples (réparent certains bogues)

− :hover, :active, :focus (pour tous les éléments)

− :before, :after, content:

− :lang()

¶ Il fonctionne avec des documents HTML ou XML indifféremment

¶ Il applique les feuilles de style importées

¶ Il préserve la cascade dans la feuille de style

¶ Il ne modifie pas la structure du document

¶ Il ne fait pas appel sans cesse à la structure DOM du document

¶ Il utilise du pur CSS pour suppléer aux règles CSS

¶ Il accepte le modèle de boîte du W3C.

¶ Il accepte la position fixed (exempte de scintillement)

¶ Il accepte overflow:visible

¶ Il accepte min/max−width/height

¶ Il accepte la transparence alpha des PNG

¶ Script poids léger (22 K)

¶ Il est entièrement modulaire

¶ Il fonctionne pour Microsoft Internet Explorer 5+ (Windowsseulement)

Comme cette application en JavaScript est formatée en modules, ledéveloppeur utilise les modules dont il a besoin sans être obligé deprendre l’application entière La meilleure façon de faire est de construire

le site normalement, puis de tester dans divers navigateurs et de remédieraux problèmes avec les bidouillages proposés Enfin, si certaines erreurssont rédhibitoires, utilisez Internet Explorer 7 pour les gommer Il fautquand même prendre en compte le fait que certains internautes ontdésactivé la fonction JavaScript sur leur navigateur

Ce genre d’application est un gain de temps et permet d’utiliser parexemple 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 { content:url(haut.png);

}

#cadre:after { content:url(bas.png);

}

#cadre { background-color:#b9b9b9;

background-color: #00F;

height: 5px;

}

Ici, il faut utiliser, à la fois, les propriétés color et background−color

La première propriété est insérée pour Internet Explorer tandis que ladeuxième est présente pour les autres navigateurs

Il est intéressant d’utiliser une image comme séparateur pour afficher unmotif grâce à une astuce

<div class="hr"><hr /></div>

Ce code XHTML est nourri par la feuille de style :

div.hr { height: 15px;

background: transparent url(motif.gif) no-repeat scroll center;

} div.hr hr { display: none;

}

Pour Internet Explorer,<hr /> 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

display: block et une marge négative de 7 pixels, le trait est affichécorrectement sur Internet Explorer.

<style type="text/css">

hr { display:block;

4.7 Conclusion

Après avoir abordé les différents aspects du code, il s’agit de le vérifier sur

le terrain et de compléter sa connaissance au contact de la "réalité" dans

le prochain chapitre

Études

de terrain

Une étude de terrain pour récolter des connaissances en CSS demanded’avoir Firefox et son extension Web Developer Cette extension permet

de découvrir ce qui se cache derrière un beau site

Les peintres vont au Louvre, les écrivains lisent des livres puis écrivent "à

la mode de", les développeurs de sites web vont à la pêche avec Firefox

et Web Developer, non pour plagier, mais pour emprunter des élémentsintéressants afin d’enrichir leur expression personnelle et surtout de savoircomment a été fabriqué un site

La feuille de style est parfois illisible sans le code source, qui lui-mêmeest illisible car trop touffu, trop long, trop complexe La solution estd’utiliser l’éditeur de feuille de style de Web Developer et de constater leschangements opérés sur la page du site, à la suite d’une modification decouleur entre autres

Cette galerie de sites met en avant de bonnes pratiques ou du codeparticulièrement intéressant Parfois l’ergonomie ou l’aspect visuel sontremarquables Ce chapitre permet de vérifier in situ les différents aspectsd’un site web

L’auteur désigne les éléments invariables du code et les éléments quipeuvent être modifiés sans interférer avec la fonctionnalité du menu C’estune vraie documentation, qui fournit des indications concrètes sur la page,ainsi que sur des classes ou des identifiants

Le script a été trouvé sur le site http://iubito.free.fr Il est proposésur le site www.openweb.eu.org, la référence en matière de CSS etd’accessibilité.

m Figure 5.1 : Le site iubito

m Figure 5.2 : Openweb.eu.org

.ssmenu ul, ssmenu li { /* Ne pas trop toucher.

Les items (les <li>) des sous-menus, notamment pour enlever les puces des listes */

html >body ssmenu a, html>body ssmenu a:visited, html>body ssmenu a:hover, html >body ssmenu a:active {

width:auto;

}

.ssmenu ul:hover, ssmenu a:hover, ssmenu a:focus, menu a:hover, menu a:focus {

/* Les liens sous le curseur.

On change les couleurs du texte et de fond, et on enlève le soulignement */

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

<a href="…"><img…/>blabla</a> */

margin-right:2px;

}

.ssmenu img.hr { /* Encore un peu expérimental, un <hr /> entre deux items pour faire un "séparateur"… */

Bref… pour résumer, ce qui est à modifier à la base, c’est :

- couleurs, 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’unmanuel 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 recettesproposées Le site est visible en 800× 600 pixels et optimisé pour

1 024× 768 pixels Au-dessous de la bannière principale figure unebannière de publicité, encadrée par des guirlandes de fruits et légumes quidonnent un effet de relief et cassent l’arrangement géométrique del’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 Figure 5.3)

Le site se dévoile sur la droite avec le menu donnant accès à la version enanglais et un feston de fleurs et de fruits (voir Figure 5.4)

m Figure 5.3 : Marmiton.org

m Figure 5.4 : Guirlandes et festons

La navigation se fait au moyen d’onglets sis sur la bannière, qui sedéroulent sous forme de menus dynamiques en CSS La page d’accueil eststructurée sous forme de boîtes autour des recettes, avec un moteur derecherche, une mise en avant d’un plat ou des propositions de menus Lesite est irrigué par une communauté de membres Pour accéder à l’espacepersonnel, il faut cliquer sur l’onglet Le formulaire d’identificationapparaît.

Sur ce site, le développeur s’arrange astucieusement pour qu’on oublie lescadres et donner du relief à chaque boîte de rubrique En regardant lafeuille de style, on découvre la cuisine du site

Chaque boîte est coiffée d’une image qui donne l’impression du relief, quicasse les lignes droites, tout en arrondissant les angles Certaines de cesboîtes sont pourvues d’une deuxième image qui leur sert de socle

m Figure 5.5 : Menus