Tài liệu MySQL et CSS- P15 docx

8 Vers la CSS3 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Le futur des feuilles de style est la norme CSS3. La feuille de style a désormais des possibilités qui la rapprocheront de la PAO et donc du papier. Tous les bricolages et bidouillages nécessaires jusqu’à présent pour améliorer le rendu des CSS ne sont plus nécessaires car la CSS3 les incorpore. Plus besoin de se creuser la tête pour avoir un affichage homogène des boîtes sous forme de colonnes, plus besoin de créer des images spéciales pour arrondir les angles ! La CSS3 est vraiment la version qui mène la CSS à la maturité. Il reste maintenant aux navigateurs à se conformer à cette norme en intégrant les recommandations du W3C. Les différentes fonctionnalités implémentées rendent le développement des CSS plus intuitif, ce qui devrait plaire aux graphistes qui n’aiment pas passer trop de temps à développer, et laisser plus de place à la création. 8.1 Placer des boîtes Placer des boîtes devient une tâche naturelle et simple grâce au concept de modèle (template). Ainsi une page classique se fait facilement. @media all { body { display: "aaa" "bcd" } #head { position: a } #nav { position: b } #adv { position: c } #body { position: d } } 8 Vers la CSS3 702 • Double Poche CSS Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. @media all and (max-width: 500px) { body { display: "a" "b" "c" } #head { position: a } #nav { position: b } #adv { display: none } #body { position: c } } m Figure 8.1 : Résultat Placer des boîtes Double Poche CSS • 703 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Ici, avec la propriété display_model, il devient possible de créer un modèle qui donne la disposition des différentes boîtes. Chaque boîte est figurée par une lettre. Dans l’exemple précédent, les boîtes sont alignées verticalement. <style type="text/css"> body { height: 100%; display: "a.b.c" (2em) " ." (1em) "d.e.f" " ." (1em) "g.h.i" (2em) m Figure 8.2 : Résultat 8 Vers la CSS3 704 • Double Poche CSS Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 5em 1em * 1em 10em} #logo {position: a} #motto {position: b} #date {position: c} #nav {position: d} #main {position: e} #adv {position: f} #copy {position: g} #about {position: h} </style> <p id=logo><img src=… <p id=motto>Making Web pages since 1862 <p id=date>August 2, 2004 Les lettres représentent une boîte, les points un espace. De cette façon, la page est presque dessinée par la disposition de ces caractères. Dans cet exemple, la page est composée de trois rangs et de trois colonnes, séparés m Figure 8.3 : Résultat Placer des boîtes Double Poche CSS • 705 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. par un espace blanc de 1 em. Le rang et la colonne du milieu ne sont pas définis ou définis par un astérisque, ce qui les rend flexibles au niveau de leurs proportions. Les mesures, à la fin de la propriété display, donnent la largeur de chaque colonne, la première de 5 em et la dernière de 10 em. Il est facile aussi d’utiliser des onglets. <style type="text/css"> body {background: silver; color: black} div.records {display: stack; border: outset} div.record {display: card} h2 {display: tab; width: 5em; border: outset; text-align: center} h2:current {border-bottom: solid silver} </style> <div class=records> <div class=record> <h2>Men’s fashion</h2> <ul> <li>Oversized jeans, 4 pockets. <li>… <ul> </div> <div class=record> <h2>Women’s fashion</h2> … </div> <div class=record> <h2>Children’s fashion</h2> … </div> </div> Les boîtes ont la possibilité d’avoir des coins arrondis et une ombre, que l’on ne peut obtenir actuellement que par du bidouillage de code. div .nouvelles{ border: thin solid; box-shadow: 0.2em 0.2em #CCC; border-radius: 1em; } box−shadow donne les distances par rapport à la boîte, horizontale et verticale. 8 Vers la CSS3 706 • Double Poche CSS Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 8.2 Autres caractéristiques Les couleurs Il est possible de représenter les couleurs avec le système de codage HSL (Hue, Saturation, Luminance, ou TSL en français pour Teinte, Saturation, Luminance). Ici encore, c’est une manière plus intuitive de définir une couleur, en l’éclaircissant, en lui donnant plus de profondeur, etc. m Figure 8.4 : Boîte ombrée à bords arrondis Autres caractéristiques Double Poche CSS • 707 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. La propriété transparency permet de définir une transparence de 0.0 (transparent) à 1.0 (opaque). Les systèmes de codage de couleurs comme RGB ou HSL deviennent RGBA ou HSLA (A pour Alpha). p { color: hsla(240, 100%, 50%, 0.5) } /* bleu semi-transparent */ Le son Les caractéristiques du discours pour les navigateurs audio sont définies par diverses propriétés pour le type de voix, le débit du discours, le temps des pauses. h1, h2, h3, h4, h5, h6 { voice-family: paul; voice-stress: moderate; cue-before: url(ping.au) } p.heidi { voice-balance: left; voice-family: female } p.peter { voice-balance: right; voice-family: male } p.goat { voice-volume: soft } Les empreintes de voix sont comme les polices de caractères, elles portent un nom : paul, female, male, etc. La voix paul a une accentuation modérée avec un jingle qui l’introduit, comme les annonces de gare. La voix de femme des paragraphes de classe heidi vient de la gauche et la b Figure 8.5 : Oreille 8 Vers la CSS3 708 • Double Poche CSS Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. voix d’homme des paragraphes de classe peter vient de la droite tandis que les paragraphes de la classe goat ont une voix douce. Les polices Un certain nombre de caractéristiques étudiées pour la CSS3 concernent les polices et la manière de les afficher. font−size−adjust est une caractéristique qui rapproche les CSS de la PAO avec la même précision. Si la police de caractères demandée n’est pas présente sur la machine de l’internaute, une autre police est utilisée ; la différence de taille pour le même corps est compensée : il s’agit de s’ajuster à la taille du caractère prévue. L’interprétation progressive (progressive rendering) est un processus qui consiste en un rendu temporaire des polices en attendant qu’elles soient chargées (à la façon des images). Une fois le chargement depuis le Web opéré, la vraie police remplace le rendu temporaire sans qu’il soit nécessaire de recharger la page. Les fonds La propriété background−break permet de faire courir une image de fond sur toute une boîte, éventuellement des boîtes intérieures, ou de répéter cette image à l’identique sur des boîtes intérieures. Il est possible de mettre comme fond plusieurs images dans la même boîte. Les propriétés background−clip et background−origin donne le point de départ de l’image. Cette dernière peut être étendue sur toute la page si elle est plus petite que la page en question, ou étendue jusqu’aux bordures avec un effet de relief, ou répétée avec un espace séparateur modulable. 8.3 Conclusion Ces recommandations du W3C sont de plus en plus appliquées. À l’heure actuelle (février 2009), un certain nombre de navigateurs sont compatibles CSS3 et obtiennent un résultat satisfaisant au test Acid3 (http://acid3.acidtests.org/): ¶ Firefox 3.2a1 (Gecko/20090119) : 93/100 Conclusion Double Poche CSS • 709 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. ¶ Opera 10.0 alpha 1 : 100/100 ¶ Safari 4 Developper Preview : 100/100 ¶ Konqueror snapshot r816030 : 73/100 ¶ WebKit (moteur JavaScript V8 de Google Chrome) : 100/100 ¶ Internet Explorer 8 RC1 : 21/100 Microsoft freine l’essor du CSS3 à dessein mais cette stratégie pourrait se retourner contre eux dans la mesure où les CSS3 vont se répandre sur le web. Si de gros sites adoptent la CSS3 en demandant à leurs visiteurs de télécharger Opera ou Firefox dont l’utilisation monte — on le voit dans les statistiques des sites —, alors Microsoft sera obligé d’adopter les recommandations de W3C. Les développeurs ont intérêt à insérer du CSS3 peu à peu sur leurs sites pour être prêts au moment venu. Il est toujours possible de créer deux feuilles de styles et d’orienter les visiteurs sur l’une ou l’autre selon la version de leur navigateur mais cela oblige à développer deux fois, merci Microsoft ! 8 Vers la CSS3 710 • Double Poche CSS Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. [...]... } document.write(""); En JavaScript, la mộthode getMonth() permet dobtenir le mois partir dun objet Date La mộthode getMonth() Linformation que renvoie la mộthode getMonth() est lindice du mois Cet indice est 0 pour janvier, et non 1 Ainsi, le tableau des mois ne nộcessiterait plus de premiốre cellule vide Les instructions, rouages et moulinettes Dans lexemple prộcộdent, une instruction ộvite... rộunies et que la fonction retourne true Les objets, outils spộcialisộs Les objets sont des containers contenant un ensemble de propriộtộs dotộes chacune dun nom et dune valeur Les propriộtộs sont donc des sortes de variables inhộrentes lobjet Par exemple, screen.height dộnit la propriộtộ height (hauteur) de lobjet screen... Lobjet modốle est le prototype de lobjet et son nom commence par une capitale Linstance a les mờmes attributs que lobjet lui-mờme et permet deffectuer des transformations Tandis que des modications sont faites sur linstance, lobjet lui-mờme demeure vierge Le point qui sộpare screen et height signie que la propriộtộ height appartient screen Lobjet screen est un objet natif contenu dans le noyau de programme... arguments sous forme de valeurs entre parenthốses et qui peut retourner une valeur par lintermộdiaire du mot-clộ return La fonction est appelộe par un ộvộnement, comme onClick, onSubmit, etc Dốs que le programme rencontre un return, la fonction sarrờte Si vous subordonnez la soumission dun formulaire une fonction et quelle retourne false, laction avorte et le formulaire nest pas envoyộ vers sa destination,... ouvertes qui correspondent un ou plusieurs objets window, un ou plusieurs formulaires, un ou plusieurs liens, etc Imprimer Dans votre document HTML, vous pouvez crộer un lien pour imprimer, entre les balises HTML et imprimez la page Si le navigateur a une version ộgale ou supộrieur Netscape 4 et Internet Explorer 5, le gestionnaire dimpression... (ộcran) Cette variable, que nous allons appeler "proDouble Poche CSS 731 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark 9 Les CSS se marient bien priộtộ", prend une valeur implicite dốs louverture de la page selon la rộsolution de lộcran du visiteur du site Lobjet et ses instances Linstance dun objet est crộộe avec la mộthode new() suivie du nom de lobjet Lobjet modốle... daffectation (=), qui attribue une valeur une variable, et lopộrateur dộgalitộ (==), qui teste lộgalitộ entre deux valeurs ou entre une variable et une valeur Suivent deux lignes utilisant la mộthode write() de lobjet document Cette mộthode permet tout simplement dộcrire du texte dans un document Au lieu dộcrire du texte littộral, le programme mờle du texte et des variables Le texte est encadrộ dapostrophes,... JavaScript 1.1 Netscape Navigator 3.0, Opera, Mozilla JavaScript 1.2 Netscape Navigator 4.0/4.05, Internet Explorer 4.0, Opera, Mozilla JavaScript 1.3 Netscape Navigator 4.06, Internet Explorer 5.0, Opera, Mozilla JavaScript 1.4 Netscape Navigator 6.0, Internet Explorer 6.0, Opera, Mozilla JavaScript 1.5 Netscape Navigator 6.0, Mozilla Pour que le code napparaisse pas en clair dans les navigateurs antiques,... valeur, 9 m Figure 9.14 : While break et continue Dans une boucle, pour ộconomiser du temps et de la ressource serveur, il est courant dutiliser break dans un test conditionnel Cette instruction rompt la boucle et ộvite plusieurs tours inutiles Tandis que continue permet de sauter une boucle sur une condition et de poursuivre la boucle suivante directement Double Poche CSS 729 Please purchase PDF... votre page affichera une erreur JavaScript La variable La variable alloue une portion de la mộmoire de votre ordinateur une donnộe et le nom de la variable permet de dộsigner le contenu de cet emplacement mộmoire Une variable typộe permet de bien gộrer la mộmoire car un objet Date, par exemple, prend moins de place que son ộquivalent en chaợne de caractốres m Figure 9.10 : Variables La dộclaration se . Les lettres représentent une boîte, les points un espace. De cette façon, la page est presque dessinée par la disposition de ces caractères. Dans cet exemple,. de mettre comme fond plusieurs images dans la même boîte. Les propriétés background−clip et background−origin donne le point de départ de l’image. Cette