CSS alternatifs aux pseudo-classes avec PHP et Modernizr

PHP paramètre JavaScrit qui charge le cas échéant des CSS alternatifs : eux-mêmes générés via PHP uniquement dans les cas nécessaires…
exemple.

Il est difficile lors de l'exécution PHP, d'anticiper des particularités telles que la présence de JavaScript, l'interprétation de HTML5, le niveau de CSS supporté etc. Il faut en général générer une page qui s'adaptera aux contraintes du front une fois chargée par le navigateur.

Il reste possible de ne générer de solutions alternatives aux CSS avancés que dans les cas précis où cela soit nécessaire.

Notes d'animation et de stylage

Une interface de losange animé pour rassembler quelques notes :
equatorium.net/e1/an--animations/an-losange.html

Enchaînement de durées "aléatoires" pour 'transition'

Chaîner des transitions CSS de durée pseudo-aléatoire sur le mode 'toggle' sans latence.

:target : pseudo-classe rafraîchie avec pushState()

En évoquant il y a trois jours ':target' et son manque d'harmonie avec une url re-formulée par "pushState()", se posait la question du problème sur IE 10 - Windows ne fait pas l'écran à la maison le week-end.
Le problème y est identique. Les solutions proposées alors fonctionnent bien sur IE 10 et 11, mais sans le déplacement dans l'historique - boutons "back" et "forward" via notamment le clavier.

Rafraîchir ':target' sans s'occuper du DOM

:target : pseudo-classe à concilier avec pushState(), et IE 8

Edit du 31/07/2014 : voir aussi :target : pseudo-classe rafraîchie avec pushState().

La pseudo-classe CSS 3 ':target' sélectionne l'élément du DOM pouvant correspondre à une ancre dans l'url. Une navigation interne à la page, d'ancre en ancre, se fait en général directement, et l'un des soucis serait alors de savoir si l'on veut tenir compte d'Internet Explorer 8.

Et IE 8

Il y a une réponse avec 'onhashchange' : La pseudo-classe ':target‘ : alternative pour IE 8.

"pushState()" ne rafraîchit pas ':target'

Dès que l'on rajoute une couche de liaison entre navigation interne et l'url de la page, une question épineuse se pose.

Outils couleurs : pour des contrastes suffisamment accessibles

Les WCAG 2 fournissent une formule pour établir le ratio entre deux couleurs. La formule est exprimable en JavaScript.

Il est ainsi possible de déterminer, dans un spectre de couleurs complémentaires à une couleur précise, laquelle lui sera la plus fortement contrastée. Dans l'algorithme, ce spectre est paramétrable sur trois teintes :
- code générique ;
- interface pour 4913 couleurs à partir de 3 complémentaires.

Il l'est tout aussi facilement sur cinq teintes : interface pour 4913 couleurs à partir de 5 complémentaires.

En laissant la notion de complémentaire pour élargir la sélection à un spectre élargi à toutes les nuances : un outil pour obtenir une couleur contrastée renforcée.

PS : ce formulaire est désormais riche de fonctionnalités ARIA
- "Accessible Rich Internet Applications".

PPS : essais systématiques sur www.equatorium.net/e1/declinaisons, dont couleurs-contrastes-5 qui manifeste qu'il n'y a pas de corrélation directement proportionnelle entre le ratio et la valeur de luminance L du système HSL.

Outil CSS : générer des pseudo-classes CSS ':nth-child()'

J'ai mis en ligne un générateur de pseudo-classes CSS "nth-child(in+o)" : Générer des pseudo-classes CSS ':nth-child()' \ Canopée / Equatorium.

Avec le projet de le compléter : avec une couche WAI-ARIA ; et avec des graphiques SVG - reste à voir si je saurais porter l'accessibilité dans le SVG.

Note janvier 2016 : en cours de refonte totale.

Interface : player-animateur d'une séquence d'images

Depuis plus d'un an, je n'ai pu trouver à continuer ce player, qui anime une séquence d'images, en y développant la synchronisation sonore - mise à jour 25 mai 14 : ni à en développer les indications temporelles, les raccourcis clavier etc. ni à en repenser l'interaction (clic sur barre lecture en mode play ?)  :
Player-animateur d'une séquence d'images (2012).

Édit du 14 novembre 2015 : il fonctionne avec la barre de contrôle traditionnelle située sous le player, mais également avec la barre de scroll verticale.
Dépôt sur Github

Source (vidéo) des images :
Dessin animé : Un monde de logos !! - Nouveau logo - creads blog.

JavaScript : condition ou opération mathématique

NB 141221 : utile avec la manipulation et conversion des types JavaScript
cf. mémo opérateurs JavaScript.

Pour l'efficacité du code, l'on peut vouloir éviter une condition par le recours à une clé ou un index appelant telle fonction :

Outil javascript : url anti-cache en Ajax récursif

L'ajax récursif, utile pour accéder au code source d'une page, à ses données HTTP etc. doit tenir compte de la dernière version de la page sans s'en tenir au cache du navigateur. L'on pourrait lancer une requête avec la méthode classique pour forcer le rafraîchissement : le passage de query string. Le problème sur un CMS tel que Drupal, est le ralentissement considérable causé par ces paramètres supplémentaires d'url.

Une solution réside dans l'insertion d'un identifiant. Liant authentification, droits d'utilisateur et accès au contenu, la variation de cet identifiant devrait théoriquement, et je l'ai en pratique constaté, lancer la requête sans être arrêté par le cache.
Sur Internet Explorer cependant, et sans trop de surprise, il faut s'en tenir aux paramètres traditionnels.

var url = document.location.href;
ajax.open("GET",msie > 0 ? 
     url + ((/\?/).test(url) ? "&" : "?" ) + new Date().getTime() :
     url.replace(/\/{2}/,"//" + new Date().getTime() + "@"),
true);

Exemple dans un bookmarlet de récolte de données.

Outil JavaScript : adapter l'encodage d'un Ajax récursif

La balise '<meta' ou à défaut, la propriété 'document.characterSet', permettent d'accéder à l'encodage d'une page web. Cependant, l'encodage réel du fichier source peut s'avèrer différent - d'où de possibles problèmes d'affichage - ou des soucis en cas d'Ajax "récursif".

Outil JavaScript : références non "parsées" du code et Ajax récursif

Dans le cadre de mon activité d'intégrateur HTML, j'ai eu à concevoir une réponse à cette question : comment accéder en JavaScript au code source d'origine d'une page web, avant son analyse par l'agent utilisateur ?

Outil CSS : étanchéifier des éléments contenants

.ec:before {
    content: "\8";
    display: block;
    height: 0;
    text-indent: -4444px;
}
.ec:after {
    clear: both;
    content: " ";
    display: block;
}

Objectifs :

1. encadrer des flottants sans recourir à la propriété 'overflow' sur l'encadrant, ni à 'clear' sur l'élément qui suit ;
2. attribuer une marge supérieure à un élément (non flottant) sans incidence sur l'élément parent ;
3. avoir la possibilité de tenir compte le cas échéant de Safari 3  :) - testé sur Win 7 - et en oubliant ici IE 6 et 7.

Outil JavaScript : détecter l'activation des styles pour améliorer l'accessibilité et optimiser les scripts

…
var detectionCSS = false;
function detecterCSS(){
 var b = document.getElementsByTagName("body")[0];
 var x1 = b.offsetWidth;
 b.style.width = x1 - 1 + "px";
 var x2 = b.offsetWidth;
 b.style.width = "";
 detectionCSS = x1 == x2 ? false : true;
}
</script>
</head>
<body>
<script>
detecterCSS();
</script>

Récemment écrit pour un site de Sanofi - mais en XHTML 1 :
=> présent dans l'en-tête via l'appel d'un fichier 'techno-abilities.js', qui contient aussi Modernizr et l'ajout d'une classe 'js' - afin, réciproquement, de détecter l'activation du JavaScript pour les CSS.

La variable 'detectionCSS' est ensuite sollicitée dans les scripts qui sont appelés à la fin de 'body'.
Exemple : définir une fonction vide pour un carousel avec styles désactivés.

Note CSS : unités accessibles pour font-size

Cf. article de Matthieu Bué : Font-size, Responsive et Accessibilité : le Bon, la Brute et le Truand » Webdesign Friday (#wdfr)

Elément body réglé à cinq huitièmes (62,5%) de 16px (réglage agent par défaut) càd élément body réglé à 10px obtenu au 'reset' par :
body {font-size: 62.5%}

L'unité 'em' est préférable à l'unité 'px' quand on tient compte d'utilisateurs accoutumés au maniement de vieux IE ;
et formellement aussi, de référentiels d'accessibilité
(et du gadget A⁺)
avec l'inconvénient de calculs pour compenser les héritages.

CSS3 résout la question de l'emboîtement avec l'unité 'rem' ('r' pour "root")
NB : non encore personnellement testé

En tentant a priori 'rem' CSS3 avec compatibilité IE7-8  :
h2{font-size: 2.2em; font-size: 2.2rem;}
comment traiter théoriquement les niveaux intermédiaires ?
- si l'on y évite 'font-size', quelle utilité alors pour 'rem' ?
- sinon multiplication des calculs :
.divpourh2 {font-size: 1.1em;}
h2 {font-size: 2em; font-size: 2.2rem;}
rendant de nouveau 'rem' superflu.

"Commentaires" le 4 mars 2014

1) Ce n'est pas une bonne idée de régler une font-size de base.
Eviter 62.5% car on ne sait pas de quoi in fine,
certains rares navigateurs n'adoptant pas 16 px par défaut 
- le 13 juin 2014 : la détection de '.css("font-size")'
par jQuery renvoie une valeur en pixels, 
qui est celle de ce réglage si l'élément s'affiche en '1em'.
Et surtout liberté de l'utilisateur d'adapter
ses possibilités de lecture via le paramétrage du navigateur.

2) Pour savoir de quoi sont 62,5%, il faudrait contrarier
d'éventuelles préférences utilisateur, avec
html {
 font-size: 16px;
}
NB : mais en ce cas autant imposer directement
html {
 font-size: 10px;
}
sans prendre la peine du 62.5

Faut-il contrôler le rendu à ce point ?

Sans doute vaut-il mieux :

- s'abstenir de définir 'font-size' pour html et pour body, 
et prendre la peine de calculer en em en prenant 
comme base probable 16px - avec, dans certaines zones au pixel près
(mentions légales ?), une zone intermédiaire à 10px,
pour avoir en-dessous de l'em décimalement précis

- dans des projets à trop forte contrainte graphique :
html {
 font-size: 10px;
}
"et basta"

Liens compatibilité

Fil d'une lecture :

1. Les commentaires conditionnels : passé, présent et futur | Openweb.eu.org
2. html - How do I target only Internet Explorer 10 for certain situations like Internet Explorer-specific CSS or Internet Explorer-specific JavaScript code? - Stack Overflow
3. Conditional Compilation (JavaScript)
4. Code with standards | Testing made easier in Internet Explorer | modern.IE
5. HTML5 Cross Browser Polyfills · Modernizr/Modernizr Wiki · GitHub
6. What is a Polyfill?