color-glass J'adore le CSS :-D.
Pour deux raisons :
  1. les possibilités sont énormes ;
  2. personne n'en exploite plus de 20% des solutions.
Ensuite, parce que c'est également léger et simple (plus léger que des images et plus simple que du JS qui n'est pas adapté à du design).

Saviez vous qu'on pouvait laisser le système d'exploitation choisir lui même des couleurs ? Ou bien inverser le sens du texte ?

Voici quelques propriétés CSS qui en plus d'être utiles, peuvent donner une touche de finesse à votre style graphique et remplacer du JavaScript.

Word-wrap

Qui n'a jamais eu un soucis de ligne de code ou d'url trop longue et dépassant de son petit cadre ? Ça arrive quand une chaîne de caractères est trop longue sans contenir d'espaces. Avec ceci, c'est fini ! word-wrap permet justement de forcer la coupure des chaînes trop longues (exemple ici).
word-wrap: break-word;

Empty-cells

Vous avez un tableau HTML. Certaines cellules sont vides, et vous voulez les masquer. Rien de plus simple, appliquez sur votre tableau :
empty-cells: hide;
Démonstration sur le calendrier sur le cote de la page (dont le code PHP est disponible ici, à tout hasard).

Counter

Couplée à la pseudo classe « :before » et à « content », count permet de compter en CSS. Exemple , où les titres sont numérotés en CSS et dynamiquement (c'est à dire que supprimer un paragraphe au milieu ne brisera pas la suite des titres : virer le §2 ne vous fera pas passer du §1 au §3, mais renommera le §3 en §2).
h1:before {
counter-increment: count0;
content: counter(count0,upper-roman)" - ";
}
Il est possible d'utiliser plusieurs compteurs, de les coupler et de choisir leurs type : chiffres romains, chiffres arabes, lettres grecs, latins, arméniens, minuscules/majuscules…
Dans mes tutoriels (exemple), les sommaires et les titres sont numérotés avec ça. Mon code CSS dédié à ça est

(Note : je n'ai pas encore trouvé comment récupérer les valeurs des compteurs en JS. Je pense que c'est impossible, ou alors que personne n'a été assez tordu pour vouloir le faire : je ne trouve rien à ce sujet.)

Du CSS ciblé suivant la taille de l'écran

Sans PHP, ni JavaScript.
Les CSS permettent d'indiquer si un effet doit être appliqué lors de l'affichage, de l'impression, de la projection sur un écran de TV, etc. Ce qu'on sait moins (du moins je pense car la doc est limitée parmi les blogs) c'est qu'on peut cibler aussi sur la taille de l'écran. C'est facile à coder :
@media only screen and (min-device-width: 480px) {
// CSS a ne pas appliquer aux petits écrans
}
@media only screen and (max-device-width: 480px) {
// CSS a appliquer sur les petits écrans (inférieur à 480px de large) ici
}

// CSS normal, ou CSS commun à tous les écrans ici
Mon site s'affichant sur un smartphone voit apparaître un bouton « version mobile » du site. Il est toujours présent, mais juste masqué sur les grands écrans avec cette solution. (Ensuite, c'est un cookie qui gère l'utilisation du thème mobile ou pas.)


Vous voyez donc que le CSS ne se limite pas simplement au padding, margin et border, mais permet d'autres choses. Allez, ceci est cadeau, même si ce n'est pas moi qui ait fait le PDF.
Ah, et également un lien à propos des poids CSS : suivant qu'on cible une classe d'un élément, un ID ou un ID dans un ID, le CSS correspondant sera plus ou moins prioritaire. Je pense que ça résoudra pas mal de casses têtes, j'étais pas au courant de tout ça.

image de Photo-Fenix.com

11 commentaires

gravatar
mvik a dit :

J'ai découvert aussi récemment la balise css "meta" qui permet d'adapter l'apparence du site en fonction de la taille et de l'orientation de l'écran. Plus besoin de développer une "application" spéciale-mobile, un sous-domaine en m.lesite.com, le javascript inutile, (ps : le cookie n'est pas nécessaire non plus), etc. ! génial.
Un bel exemple (regarde le résultat en redimensionnant la taille de la fenêtre de ton navigateur) : http://www.simpleweb.fr/2011/10/19/nouveau-theme-graphique-en-html5-et-responsive-design/
Merci pour les autres "trucs"

gravatar
Rolinh a dit :

[quote=Le Hollandais Volant]J'adore le CSS[/quote]
Ouais, merci Håkon Wium Lie.

Pour la petite anecdote, j'ai passé 2 semaines à faire de la voile en Norvège avec lui et n'ai su qu'un an plus tard qui il était... marrant la vie des fois :P
Une personne vraiment sympathique en plus!

gravatar
Iste a dit :

Une seule vrai raison d'utiliser le CSS : C'est fait pour ca !!!

gravatar
Le Hollandais Volant a dit :

@mvik : o_O

Le redimensionnement fluide que je vois là, c'est juste du HTML5-CSS ?
Tu parles que c'est génial : c'est super-génial, ouais !!

EDIT : ah, non, le truc fluide, c'est du JS/JQuery. Woah, tout ça me donne envie de faire quelques retouches à mon design, #html5 et #Css3 inside :) (Une seule règle : IE osef)

RE-EDIT : oh, et je vois qu'on peut utiliser les @media max-width {} sans les "device", ça c'est intéressant… Très intéressant…

gravatar
mvik a dit :

@Le Hollandais Volant : tout ceci est possible *uniquement* en CSS. Pas de html5, ni JS, ni JQuery, ni Ajax, ni cookie... encore mieux !
Dans l'exemple, ils ont associé plusieurs techno, mais c'est superflus, l'idée est là.

gravatar
Le Hollandais Volant a dit :

Sous Firefox ou Chrome, ça ne semble pas marcher, mais sous Opera j'ai un sorte d'effet de redimensionnement et de repositionnement fluide et dynamique de tous les éléments de la page lors du redimensionnement de la fenêtre.



Je viens d'y passer un moment, et j'ai réussis à isoler le code responsable de cette fonctionnalité.

Il y'a un truc que je ne comprend pas : comment un effet CSS "transition" appliquée sur le propriété "color" arrive à s'appliquer sur le taille de la police ?


Voilà le code :

<!doctype html>
<head>
	<meta charset="UTF-8" />
	<title>42</title>
	<style type="text/css">
body {
	background-color: silver;
}

a {
	color:#ab3446;
	transition-property: color;
	-o-transition-duration: 2s;
	transition-duration: 2s;
}

ul.menu {
	list-style-type:none;
}

ul.menu ul a {
	text-decoration: none;
	color:#fff;
}

ul.menu li a {
	display: block;
	float: left;
	font-size:1.2em;
	margin:0 20px 0 0;
}



@media (max-width: 767px) {
	ul.menu li a {
		font-size: .7em;
	}
}

@media (min-width: 768px) {
	ul.menu li a {
		font-size:1em;
	}
}

@media (min-width:1224px) {
	ul.menu li a {
		font-size:1.4em;
	}
}

</style>
</head>
<body>

<ul class="menu">
	<li><a href="/">Een</a></li>
	<li><a href="/">Twee</a></li>
	<li><a href="/">Drie</a></li>
</ul>

</body>
</html>


Je ne sais pas si un comportement interne d'Opera, mais vous pouvez essayer.
Dans tous les cas, le CSS/CSS3 n'y est pour rien dans ce que je vois à l'écran.

gravatar
Le Hollandais Volant a dit :

@maman : j'ai réparé ton lien, qui est à visiter avec Chrome, au passage.
C'est assez impressionnant, en effet oO

Ça rejoint un peu mes vieilles images CSS : http://lehollandaisvolant.net/tout/css_art.php
Là ils ont ajouté les animations et tous les CSS3 sortis depuis le temps :D

Pour l'animation, je vois qu'ils utilisent les effets internes de Chrome, mais je pense qu'avec l'effet à moirer, il soit possible de faire ça avec du CSS normal aussi.

En tout cas, j'adore !

gravatar
TD a dit :

CSS, c'est plus fort que toi !

Les commentaires sont fermés pour cet article