Du CSS en 2023 : entre incongruités et grid
mardi 17 janvier 2023 :: perrick :: CSS :: aucun commentaire :: aucun trackbackIl y a bien longtemps, j’étais webmaster : c’était au bon vieux temps de Netscape 3. Le CSS n’existait pas encore et je m’extasiais devant des colonnes colorés de 1px de large. Depuis ce métier a explosé, éclaté par de multiples spécialités (pour le contenu, l’interface, l’interaction, l’intégration, le développement, l’hébergement, et j’en oublie sûrement). Et le mien est devenu « développeur back-end ».
À l’occasion d’un nouveau projet chez No Parking, je me suis laissé tenté par l’intégration d’un design « from scratch ». Cela n’arrive pas si souvent qu’on re-découvre ses premiers amours.
J’ai donc déterré à nouveaux frais les joyeuses incongruités du CSS : la plus belle aura été un box-sizing: border-box; à mettre sur les balises input - sans que ce soit nécessaires sur les select - pour préserver l’harmonie des largeurs.
Mais j’ai aussi découvert l’avancée majeure que constitue la grille CSS et son guide complet. Il existe enfin un mécanisme pour faire des gabarits solides et élégants. On le doit non pas au GAFAM mais à Bloomberg et à Igalia : le premier avait des problèmes de mise en page et des sous, l’autre des compétences à vendre. Quel bonheur de découvrir au passage que ce dernier est une coopérative espagnole, capable de rivaliser avec Google, Apple ou Mozilla ! Et ça fait plus de 20 ans que ça dure.
Un formulaire se balladant bras dessus, bras dessous avec un menu stylé
vendredi 23 juillet 2004 :: perrick :: CSS :: 4 commentaires :: un trackbackEn voyant fleurir des menus "sémantiquement corrects" un peu partout : Eric Meyer, Suckerfish Dropdowns et dérivé subtil, je me disais que l'occasion arrivait de mettre un terme à mes menus javascript dans openTIME.
Après avoir sué toute une après-midi pour arriver à quelque chose de presque parfait (sur IE, Firefox et Opera - Windows uniquement), je tombe sur une *** de "bug / feature" : dans Internet Explorer (uniquement bien sûr), un élément de formulaire (<input> ou <select>) ne laisse jamais la priorité à un élément stylé qui viendrait se poser par-dessus. J'ai trouvé un bout de code qui pourrait tout remettre dans l'ordre Form Elements Overlapping A Styled Layer mais on retombe dans une couche de javascript supplémentaire. Dommage.
Se taper dessus pour des couleurs
vendredi 28 mai 2004 :: perrick :: CSS :: un commentaire :: aucun trackbackLe choix d'un code sémantique a soulevé des grandes discussions particulièrement chez SimpleBits : de Part I: Headings à Part XVI: Launching Windows. Mais une chose à laquelle je ne m'attendais pas, ce sont les 34 commentaires sur le choix de la couleur sur fond blanc ! Alors to noir (#000) ou to pas noir (#333 à #666) ?
Festar se fait beau, merci CSS
vendredi 30 avril 2004 :: perrick :: CSS :: 3 commentaires :: un trackbackToujours dans la liste des sites qui basculent aux standards : ma dernière production pour Festar 2004. Et le MarkUp Validation Service répond This Page Is Valid XHTML 1.0 Transitional!. C'est toujours ça de pris. En espérant qu'il vous plaise visuellement aussi ;-)
Petit formé deviendra grand
jeudi 22 avril 2004 :: perrick :: CSS :: 5 commentaires :: aucun trackbackNe dit-on pas : "Si tu veux donner à manger à quelqu'un, ne lui donne pas un poisson, apprends-lui à pêcher !" Alors je suis assez fier de voir un non-informaticien que j'ai formé sortir un joli site valide. http://www.storistesinfos.com/ vous attend donc sans frames, ni tables et presque sans faute. Bravo AM.
Et un petit peu d'auto-promotion au passage, si ces avantages vous intéressent, n'hésitez pas à passer par No Parking.
Remplacer les IFRAME avec les feuilles de style
jeudi 26 février 2004 :: perrick :: CSS :: 17 commentaires :: aucun trackbackLors d'un projet récent, j'ai du me plier à l'utilisation - exigée par le client - d'une IFRAME : un attribut pourtant déprécié selon le W3C. Et voilà-t-il pas qu'aujourd'hui je découvre qu'on peut remplacer ces IFRAME par quelques lignes bien pensées en CSS :
div#content {
width: 500px;
height: 300px;
overflow: auto;
}
J'ai découvert ce truc sur le site du designer Jon Hicks. Un grand merci à Laurent Jouanneau pour cette chouette découverte indirecte.
Un petit trucs pour les LABEL
jeudi 29 janvier 2004 :: perrick :: CSS :: aucun commentaire :: aucun trackbackParce qu'on a jamais fini d'apprendre ces petites choses qui améliorent l'ergonomie d'une application (ou d'un site) web, cet article de Simon Willison Simple Tricks for More Usable Forms est intéressant. J'y ai trouvé cette petite pépite de CSS qui permet de remplacer la simple flèche du label par une main -- la même qui indique qu'une action est possible :
<style type="text/css">
label {
cursor: pointer;
cursor: hand;
}
</style>
A utiliser avec les LABEL dans un formulaire donc ;-)
[Via : le StandBlog]
Des listes à la pelle CSS
vendredi 5 septembre 2003 :: perrick :: CSS :: aucun commentaire :: aucun trackbackVia Simon Willison's Weblog, une page très intéressante pour ceux qui veulent VOIR la puissance des feuilles de style : http://www.maxdesign.com.au/presentation/listamatic/.
MaxDesign (une agence australienne) y montre comment à partir du même code HTML, on peut aboutir à des effets des plus divers. Au passage, on y retrouve cette technique-ci (Eric Meyer's tabbed navbar) que j'utilise dans mes sources pro.
Ce silence qui vient de Netscape 4
mercredi 6 août 2003 :: perrick :: CSS :: aucun commentaire :: aucun trackbackDan Cederholm est le designer qui se cache derrière deux sites commerciaux qui ont fait date dans l'utilisation des feuilles de style avec un markup standard. Suite à ces deux superbes travaux (ici et là) il fait part d'une (bonne) surprise : il n'a reçu aucune plainte d'un utilisateur de Netscape 4.
Comme quoi, on peut faire du beau & solide avec les techniques offertes par CSS & XHTML. Et on peut oublier Netscape complètement. Leur navigateur en version 4 restera pour moi la raison de mon passage en 1998 vers Opera.
Mes étapes vers les standards
vendredi 4 juillet 2003 :: perrick :: CSS :: 2 commentaires :: aucun trackbackVoici donc mon parcours exhaustif pour passer de l'HTML plus ou moins propre à de l'XHTML (presque) valide :
- remplacement de <img> par <img />
- remplacement de <input> par <input />
- remplacement de <option selected> par <option selected="selected">
- remplacement de <select multiple> par <option multiple="multiple">
- remplacement de <h1 name="titre"> vers <h1 name="titre" id="titre"> (note : c'est n'est pas du XHTML strict)
- suppression des caractères spéciaux dans les URLs
- remplacement de l'attibut 'language' par 'type' dans les <script>
- suppression de l'attribut 'height' dans les <table>
- suppression de l'attribut 'align' dans les <div>
- ajout de l'attribut 'alt' dans les tags <img>
- fermeture des <options> avec </option>
- mise en minuscule des attributs de type onchange / onselect / etc.
- suppression du signe ">" du code javascript dans le XHTML (note : le code est mis dans un fichier .js exterieur)
- transformation des & en & dans les URLs
Suite de la transition vers le XHTML et presque fin aussi
jeudi 3 juillet 2003 :: perrick :: CSS :: 4 commentaires :: aucun trackbackÇa y est : je suis (presque) Valid XHTML 1.0 Strict. Après deux jours de plongée dans l'ensemble du code de présenation d'openTIME. Voici enfin les réponses que j'attendais :
Doctype: XHTML 1.0 Transitional
Errors: 1
et
Doctype: XHTML 1.0 Strict
Errors: 4
La différence entre les deux DTDs disparaitra quand je referais la navigation. Pour l'instant il y a des menus déroulants (avec table et formulaire). Bientôt ils seront remplacés par d'autres menus tout aussi déroulants (mais avec liste et CSS). Et là, ce sera le début du bonheur...
Quant au dernier bug, je ne sais pas encore comment le résoudre : il s'agit d'un "swap menu" - deux menus multiples entre lesquels on peut faire basculer les options. Et forcément celui de droite peut être vide, au moins au départ... et ça, c'est pas possible : You have a ‘FOO’ element, but you have omitted some required sub-element of it. Alors si quelqu'un a la réponse (et qu'en plus elle est élégante), je suis preneur ;-)
Transition vers le XHTML
mardi 1 juillet 2003 :: perrick :: CSS :: un commentaire :: aucun trackbackEn parcourant http://openweb.eu.org/ à propos des feuilles de style CSS sur lesquelles je me pose encore des questions. Je suis tombé sur une page à propos du passage de l'HTML - que je pratique depuis 1995 - à l'XHTML.
Un petit tour sur le site de validation du W3C pour vérifier l'étendu des dégats sur une page type d'openTIME :
Doctype: XHTML 1.0 Strict
Errors: 1723
Après quelques heures de boulot - merci le copier / coller sur tous les fichiers - on descend très vite sous une barre plus raisonnable :
Doctype: XHTML 1.0 Strict
Errors: 93
C'est bien plus respectable. Par contre je n'ai pas encore trouvé de réponse à un truc qui me chiffone : dans une balise de type <input type="radio" name="report" value="test" id="test">, est-ce que je dois remplacer l'attribut name par l'attribut id ? C'est effectivement ce que me demande l'article sus-nommé. Mais dans ce cas je perd la possibilité de lier mon bouton radio et le texte qui lui correspond... Alors que faire ?
Quelques trucs CSS
jeudi 15 mai 2003 :: perrick :: CSS :: 3 commentaires :: aucun trackbackHier j'ai mis en ligne une nouvelle maquette pour ce blog et j'y ai mis dans la feuille de style quelques trucs découverts en chemin :
li.details:before {
content: "\003A \003A \0020";
}
Cette ligne me permet d'ajouter les " :: " devant chaque ligne de mon menu (truc de Mark Newhouse).
p+h1{
font-size: 1.2em;
}
Là, c'est le + qui fait toute la différence (en anglais " adjacent sibling selectors") : il me permet de diminuer la taille du titre des posts moins récents (truc de Bobby mais je vais m'y pencher bientôt.
Du beau CSS ailleurs et une refonte ici
mardi 13 mai 2003 :: perrick :: CSS :: aucun commentaire :: aucun trackbackPendant le temps de la refonte, j'ai pu découvrir quelques liens intéressantes autour des feuilles de style CSS :
- http://placenamehere.com/neuralustmirror/ et un projet intéressant : http://placenamehere.com/neuralustmirror/200202/
- http://www.mezzoblue.com/ avec un (autre) projet intéressant : http://www.csszengarden.com/
Par ailleurs , une technique à explorer de plus près pour la suite des évènements : http://www.stopdesign.com/articles/css/replace-text/
Et si jamais vous avez des commentaires à faire sur cette refonte, n'hésitez pas à me les faire parvenir...
Un redesign en CSS
mercredi 7 mai 2003 :: perrick :: CSS :: 2 commentaires :: aucun trackbackVoilà, c'est dit : je me lance dans un redesign de ce site :: on pk :: avec CSS et sans tables.
Et comme pour tout projet, la première étape, c'est de bien se documenter. Là je tombe sur une note très intéressante de Jeffrey Zeldman :
Au passage, je verrai bien si je peux faire aussi bien que Simon Willison qui vient de reporter ses tutoriaux CSS.