Le Hollandais Volant

W3school c'est plus une doc qu'un cours avec les explications.
Perso je préfère le MDN de Mozilla.

C'est bien beau de donner des leçons sur le webdesign, mais quand on ne sait pas coder un menu qui fait moins de 60% de l'ecran, même quand on scroll, et qui du coup nous cache les deux tiers de la page pour que dalle, et qu'en plus y'a aucune adresse de contact pour signaler ces conneries, ben on devrait être autorisé à fermer sa gueule et à apprendre à coder.

Bordel de merde. Pourquoi ils testent pas leur site sur mobile après avoir fait un bô truc responsive ? Ce genre de truc me gave, surtout à 8h du mat.

Et évidemment les navigateurs mobiles n'ont pas de firebug ou de console. Putain de $^£ $$°¥π.

La %7@)+ de page : http://24ways.org/ (via un lien sur shaarli)

En 2013, un bon nombre de préfixes CSS ne sont plus nécessaires (ou n’ont jamais été nécessaires).
En voici quelques uns :

-*-border-radius : border-radius est supporté par tous les navigateurs maintenant. Pour Opera et IE, ces préfixes n’ont jamais existé.

-*-box-shadow : même remarque que pour border-radius

-*-animation : mettez la version normale (sans préfix) et la version webkit. Celles de Firefox et d’Opera ne sont plus nécessaires et celle d’IE n’a jamais existé

-*-transition : vous pouvez supprimer le support Firefox et Opera, laissez le webkit (pour Safari et Android). Celui d’IE n’a jamais existé non plus.

-*-linear-gradient : ici, vous pouvez les supprimer, MAIS il faut faire attention. Avant on utilisait par exemple linear-gradient(top, red, blue), maintenant on remplace le « top » par « to bottom ». Ceci car on peut aussi mettre des angles, et l’angle était une destination alors que le « top » était un point de départ ; le « to bottom » est maintenant une destination aussi (question de rigueur, et maintenant ça ne devrait plus bouger).
Pour lui, le préfixe d’IE est également inutile. Je viens de voir, ça marche dans les dernières versions de Firefox, Chromium et Opera 12, ainsi que IE11.


Perso je commence à nettoyer mes CSS : toute ces lignes avec les préfixes prennent beaucoup de place et sont chiants à maintenir, et sont maintenant devenus inutiles, avec Chrome et Firefox qui se mettent à jour tout seuls, les dernières versions son bien ancrées dans le marché.
Pour IE, la majorité (sinon la totalité) des préfixes n’ont jamais existé.

Intéressant : une astuce HTML/Apache/PHP pour servir des images adaptées à la taille de l’écran.

Excepté une certaines lourdeur (traitement côté serveur), je ne vois pas trop d’inconvénients techniques.

Si vous voulez une astuce CSS/JS pour afficher des images à l’échelle et à la taille d’un bloc donné :
http://lehollandaisvolant.net/?mode=links&id=20130718133059
http://lehollandaisvolant.net/?mode=links&id=20130718014626
http://lehollandaisvolant.net/?mode=links&id=20130718133059

lien via http://www.gerardmenvussa.ch/shaarli/?q9oMdw

+1…

… dixit le gars qui a quelque chose comme #auth label[for="stay_logged"]+input {display: inline;} quelque part dans son code…

via http://colibri-libre.org/liens/?Ypsvcg

Une astuce pour faire des formes en CSS, formes qui s’appliquent aussi au texte (par exemple, faire un paragraphe en forme de trapèze).

Un outil pour avoir les codes CSS des courbes de Béziers très simplement (pour les animations CSS).

Très simple en fait : deux divs, arrondis pour former des cercles, avec 3 bordures sur 4 colorées et la dernière en transparent.
Les deux tournant en sens inverse et à des vitesses différentes avec les animation CSS.

:-)

J’avoue que le modèle de boite CSS proposé par IE6 est plus logique (et surtout bien plus pratique à utiliser) que celui du W3C.

Heureusement qu’on peut utiliser un « box-sizing: border-box » en CSS3 pour revenir à la définition d’IE.

Quand je vois ce qui se fait en CSS, je me dis que Mc Gyver c’est rien à côté.

Quelques astuces pour les responsives design et les images

(via JCFrog)

Oh, en effet : "blink", que ce soit en HTML ou en CSS ne marche plus ni dans Chrome ni dans Firefox.

Pourquoi avoir fait ça ? Ça restait du code valide, pourtant (au moins pour le CSS).
Si les navigateurs choisissent maintenant ce qu’ils supportent, ça promet. C’était plutôt le webmaster/dev/designer dont il faut botter le cul.
Demain ils interdiront aussi les TEXTES TOUT EN MAJUSCULES, les textes soulignés hyper-longs, super-désagréable à lire et le langage SMS : c’est tout aussi désagréable à lire dans certains cas.

Bref, juste pour dire que le retrait de blink est assez étrange : il y avait une option dans about:config pour forcer ça, en plus.

:O
Une page qui affiche des choses… sans code source. Wtf.
C’est RMS qui doit être content : bientôt, le HTML lui même sera non-sourcé. Ça va être grandiose :-/

Via http://colibri-libre.org/liens/?MrxNRg

Une spirale de Fibonacci. En CSS.

Quand je regarde le code, je comprend mieux : le CSS est maintenant officiellement un langage de programmation, avec des boucles et des variables.

ÉDIT : ah non. C’est du SCSS http://walane.net/on-the-web/lien/?id=312
Qui permet de programmer du CSS qui va être rendu en CSS après.

Comment cibler du CSS à un navigateur en particulier, en utilisant des "hacks" qui ne sont reconnus que par un certain navigateur.

Par contre, bien que l’article soit daté de mai 2013, on dirait qu’il est beaucoup plus vieux : les commentaires conditionnels ne fonctionnent plus dans IE>9 (et la version la plus récente mentionnée ici est IE7 (!), et depuis il y a aussi Chrome qui est sorti. Je ne suis pas sûr donc que tout ça marche encore.
Sans compter que Firefox qui, à partir de la version 4 a changé pas mal de chose.