Le Hollandais Volant

Intéressant.
On peut aussi utiliser le "content" avec du texte.

(via bajazet : https://bajazet.fr/shaarli/index.php?jnVr5w )

Bah, depuis longtemps que j’utilise tout ça moi, et bien plus^^

Je m’en fout d’IE, mais alors à un point…
Un bon navigateur devrait afficher au pixel près tout code HTML et CSS valide. Je ne devrait même pas avoir à tester ailleurs que sur le site du W3C, en théorie.

Basé sur ce principe, Firefox, Chrome et Opera sont des bon navigateurs.

Oh, le calc() va être super utile !!

Genre pour calculer 100% — 50px : avoir une marge exploitable de largeur fixe à côté d’un bloc fluide dans un contenu fluide (pour du responsive desing)
(le margin c’est pourri car après faut jongler avec les position relative/absolute pour occuper l’espace libéré.

Je connaissais les autres. Et perso j’adore le counter() : http://lehollandaisvolant.net/tuto/css.php#ordered
Exemples :
http://lehollandaisvolant.net/tuto/css/exemple18.html
Ou pour le sommaire là :
http://lehollandaisvolant.net/tuto/opera/#sommaire

(via sebsauvage)

Si vous utilisez Google Font n’utilisez pas, svp, les API en CSS de Google : téléchargez plutôt la police localement, ça vous rendra service le jours où le service sera coupé.

Pour les utilisateurs, ça évite des requêtes qui prennent du temps (et ralentissent la page, surtout que les @import() en CSS n’autorisent pas les téléchargement en parallèles), ce n’est pas spécialement bon pour la vie privé non plus (#parano #jesais).

C’est juste une astuce, vous faites comme vous sentez, mais bon voilà quoi…

La page où l'initiateur du CSS pour le HTML décrit son idée, en 1994.

Marrant de lire ça, je trouve. C'est instructif, intéressant, limite historique.

J'ai aussi quelque part sur mon site la "open letter to hobbyists" que Bill Gates écrivait aux programmeurs du monde entier pour leur dire de construire un business dessus, et ne pas le faire gratuitement. Le contraire de ce que fait RMS depuis 1984, en somme.

Je n’avais pas fait gaffe, mais c’est bien le cas…

Des styles en -webkit- apparaissent en effet dans Dragonfly, quand on affiche les styles calculés.
Par exemple, ici j’ai « -webkit-box-shadow » alors que mon CSS ne contient que le « box-shadow » et non « -webkit-box-shadow » ni même « -o-box-shadow ».

Pourquoi les navigateurs autres que Chrome et Safari se mettent-ils à reconnaître les CSS destinés à Webkit ? Parce que les webmasters omettent d’ajouter les propriétés CSS destinées à Opera (-o-) et Firefox (-moz-), et se contentent bien souvent de mettre celles pour Chrome (-webkit-).

En pratique ce n’est pas mal, mais sur le débat de fond, c’est une perte que l’interopérabilité essuie là.
Google a réussis à imposer des choses non-standards. Des choses cool, mais non standards et non-interopérables (en tout cas, ça n’était pas destiné à l’être).

En gros : merci Opera, merci Firefox, de faire le boulot à la place des webmasters fainéants…

Pour info : à part les transform 3D, qui restent LE truc de Webkit pour le moment, Opera et Firefox supportent pratiquement toutes les CSS3 usuelles (box-shadow, border-radius, text-shadow, animation, transform, gradients…).

Ça peut-être utile, tout ça.

(via Damien Van Achter sur G+)

Tiens, je connaissais le CSS « transition », mais pas « animation ».

Me gusta.
Du coup j’ai ajouté ça là : http://lehollandaisvolant.net/tuto/css3/#tc15 (fonctionne dans Opera (CSS officielle), Firefox (Officielle + avec -moz-) et dans Chrome (version -webkit-).
Pas testé IE.

BTW, je prépare une page pour regrouper mes projets PHP (blogo, linx, respawn et mon proxy PHP). Ce sera aussi une page bardé de CSS3 :-).

Mh, ça peut-être très pratique ça !

« Then to use it, open your local website in your browser and your CSS file(s) in your favorite text editor and start editing. As soon as you save the file, it is also refreshed in your browser, so if you watch your website, you can see the changes applied immediately, without refreshing your browser. »

(via Guenhwyvar dans mes commentaires.)

Très impressionnant !

Via bajazet.

Wow, c’est juste HTML5, ça ? Avec les réflexions et tout :O ?

À l’heure où je test les formulaires HTML5 "number" dans Blogotext. Opera a un petit soucis (que j’ai reporté : http://my.opera.com/community/forums/topic.dml?id=1602102) qui n’impacte rien car c’est vérifié et corrigé en PHP de toute manière.
J’ai hâte que les autres formulaires (color, date, range…) soient supportés (surtout par Firefox, car même IE10 supporte plus de truc là…) !

(ps : la démo d’Apple marche très bien dans Chrome et Opera aussi ; pas testé dans Firefox)
(via https://bajazet.fr/shaarli/index.php?OUItwg )

Oh, chouette !

Et ça marche pratiquement partout, sauf Firefox et IE (qui voient un champ text à la place, donc aucun soucis).

Oh, mais c’est bien plus subtil que ça…

– z-index fonctionne partout, du moment que l’élément à qui on l’applique a un "position" différent du défaut (donc de static ; et a donc relative, absolute ou fixed).

– z-index d’un élément enfant ainsi positionné (avec "position") fonctionne par rapport à tous les autres enfants (positionnés ou non).
Ainsi, deux <span> dans un <p> seront l’un sous l’autre ou l’autre sous l’un en fonction des z-index s’ils sont positionnés, et en fonction de l’ordre dans le code source s’ils ne sont pas positionnés (le z-index ne marche alors pas).

– z-index peut fonctionner pour placer un enfant sous le parent, à condition que le parent n’ai pas de "position" différent de "static".
Si les parents n’ont pas de position, il est même possible de placer un enfant d’un parent A sous un enfant d’un parent B.

Oh, et aucun élément n’a un position autre que le "static" par défaut… Sauf <html>, qui est en absolute. Ou <body>, je ne sais plus.

J’aime pas quand on dit que c’est impossible…

Ce n’est pas parce qu’il y a pas de propriété css "panorama 360" que c’est impossible.
Rien n’est impossible, suffit de réfléchir, même si c’est trop demander, je sais.

Quelques liens :
http://blogs.sitepointstatic.com/examples/tech/css3-starwars/index.html
http://www.tassedecafe.org/1681-generique-star-wars-css3.html
http://www.romancortes.com/blog/css-3d-meninas/

Toujours très utile cette page.
Pratiquement exhaustive, et elle va à l’essentiel, avec exemples + code.

Au fait, vu que j’ai fait souvent cette erreur : la propriété "vertical-align" ne s’applique pas au conteneur, mais au contenu.