Traduction
Tutoriel CSS - sommaire
Tutoriel CSS - recherche
L'auteur : Patrick Darcheville
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Mais attention, certaines de ces fonctionnalités ne sont pas encore complètement implémentés par les navigateurs.
Ainsi la coupure "propre" (entre deux syllabes et avec trait d'union) avec la nouvelle propriété hyphens n'est pas encore implémentée
sur tous les navigateurs récents ....
Déja avec CSS2 on peut jouer sur l'espacement entre lettres d'un mot et entre mots.
Et licet quocumque oculos flexeris feminas adfatim multas spectare cirratas, quibus, si nupsissent, per aetatem ter iam nixus poterat suppetere liberorum, ad usque taedium pedibus pavimenta tergentes iactari volucriter gyris, dum exprimunt innumera simulacra, quae finxere fabulae theatrales.
Valeur par défaut des propriétés letter-spacing & word-spacing : normal
Normal : espace entre les lettres et mots tel qu'il est défini par la police courante et/ou le navigateur.
Vous avez réalisé en local un superbe site en particulier par l'emploi d'une police exotique. Mais au moment de penser à l'hébergement du
site (afin que le public y ait accès) vous vous dites :'c'est idiot ! la police que j'ai employée ne sera probablement pas installée sur
le PC du visiteur donc je me suis fatigué pour rien ... '
Rassurez vous. Vous pouvez avec CSS3 mettre une police à disposition du 'client' le temps de sa visite.
Le titre et le texte ci-dessous apparaissent normalement avec une police téléchargée grâce à la feuille de style.
Testez cet exemple avec Chrome !
La troisième République veut que l'école élémentaire dispense non seulement l'instruction de base mais aussi fasse des petits français des patriotes prêts à se battre pour leur pays ; et à venger l'affront de mil huit cent soixante dix ; à reprendre l'Alsace et la Lorraine aux "boches".
Le texte affecté de la classe special est mis en forme avec une police qui n'est pas installée sur votre PC ...
Il est en effet possible avec CSS3 d'embarquer une police !
Regarder attentivement la feuille de style !
La première règle de style (sélecteur @font-face) permet au client d'embarquer un fichier de police sous le nom "scolaire" et qui
correspond au fichier "ecole.ttf" ou "ecole.otf".
Il suffit ensuite de préciser que tout texte affecté de la classe générique special sera mis en forme avec la police dénommée scolaire.
Aucun navigateur ne reconnaissant pas tous les types de fichiers relatifs aux polices, il faut proposer plusieurs fichiers. Ici je propose un fichier ttf et un fichier otf pour la même police.
Texte ombré avec projection normale de l'ombre
Texte ombré avec projection inversée de l'ombre
Pour la propriété text-shadow il y a quatre paramètres à passer : décalage horizontal, décalage vertical, floutage, couleur de l'ombre.
Pour les deux premiers paramètres la valeur peut être négative afin d'inverser la projection de l'ombre.
Par défaut l'ombre est en bas et à droite du texte.
Pour le troisième paramètre 0px correspond à l'absence de floutage.
Jusqu'à présent le soulignement et/ou le surlignement étaient forcément de la même couleur que le texte et consistait en un trait continu.
Ceci est un texte souligné.
J'ai utilisé les nouvelles propriétés : text-decoration-color, text-decoration-style, text-decoration-line.
la prise en compte par les navigateurs de ces trois propriétés tarde à venir.
Lorsqu'un mot est plus long que la largeur de la boite qui le contient il déborde. C'est pas joli.
La propriété CSS word-break permet la coupure de mots trop longs.
Anticonstitutionnellement
Anticonstitutionnellement
Anticonstitutionnellement
Le code correspondant :
Alors que word-break coupe le mot long n'importe où la propriété hyphens ne coupe jamais une syllabe.
Le comportement défini par la valeur "auto" dépend de la langue indiquée dans la page.
Aussi, il faut indiquer la langue via l'attribut lang de la balise HTML pour s'assurer que les fins de ligne et les traits d'union sont bien gérés
selon la langue indiquée.
Attention la propriété hyphens est encore très mal implémenté.
Anticonstitutionnellement
Anticonstitutionnellement
Anticonstitutionnellement
Si le texte déborde de la boite c'est que la propriété hyphens n'est pas encore prise en compte par le navigateur.
On peut désormais créer en CSS des styles conditionnels avec les mots clés @media et @supports.
Objectif : nous voulons que ce soit la propriété hyphens qui s'applique en priorité et à défaut word-break.
Nous avons créé une règle de style conditionnelle. Celle-ci tient sur deux lignes.
Attention j'ai simplifé la syntaxe. En cette année 2022 et compte tenu de la mauvaise implémentation de la propriété hyphens,
il serait préférable d'écrire :
le css3 c'est formidable !
le css3 est de plus en plus puissant !