Articles tagués « CSS »

Flux RSS du tag « CSS »

Stylez-moi ce formulaire !

Par Eric Le Bihan

Après avoir essayé à plusieurs reprises et par tous les moyens de styler les éléments d’un formulaire html pour donner vie aux créations des graphistes, il a bien fallu se rendre à l’évidence : ce n’est pas possible ! Déjà les styles ne sont pas appliqués de façon identique selon les navigateurs, mais en plus ces éléments diffèrent selon les systèmes d’exploitation et leurs versions successives, CQFD. […]

Centrer un texte en hauteur

Par Eric Le Bihan

Je réagis à un billet de Jay Salvat qui explique comment centrer un texte en hauteur (et en largeur). Je n’avais pas prévu de faire un billet à la base mais de laisser un commentaire sur http://blog.jaysalvat.com. Devant l’impossibilité de laisser un commentaire avec du code html et css, je vais détailler ici deux différentes façons de centrer un texte en hauteur (deux manières qui, nous allons le voir, sont complémentaires). […]

Quoi de neuf du côté des mises en page CSS (CSS Layouts) ?

Par Eric Le Bihan

Grégoire Dierendonck Vous avez certainement lu comme moi, que tout ce que vous saviez sur les css étaient faux en lisant l’article de Digital Web par Rachel Andrew. Je n’ai pas lu le livre, mais à la lecture de l’article j’ai voulu tester une nouvelle manière de mettre en page mon code html. Avec l’arrivée d’IE8, on va pouvoir enfin utiliser les propriétés CSS display:table, display:table-row et autres display:cell. Et je me pose la question suivante : à quoi servent réellement ces propriétés ? Parce que si on a bataillé, argumenté et convaincu des dizaines de personnes que les tableaux […]

Utiliser la propriété display: inline-block

Par Eric Le Bihan

Cette propriété qui est très peu utilisée pour des raisons de compatibilité navigateur est néanmoins intéressante. Elle permet en effet d’appliquer des styles de type « block » à un élément ayant un comportement de type « inline », comme par exemple, une largeur, une hauteur, des marges, etc. Ce qui veut dire que dans certains cas, il est possible de structurer des parties de pages sans avoir recours à la propriété float (left, right) ou position (relative, absolute). Bien qu’incomplètement prise en compte par les différents navigateur, il est possible de l’utiliser avec quelques connaissances supplémentaires, démonstration : Prenons l’exemple simple d’un formulaire […]

Les nouveaux navigateurs débarquent (attention ils mordent)

Par Pierre Bertet

Opera 9.5 vient tout juste de sortir dans sa version finale, et la liste des changements est impressionnante (vous pouvez également consulter un article présentant les nouveautés aux développeurs). La date de sortie de Firefox 3 a été fixée au 17 juin. Safari 3.1 attend ses nouveaux camarades depuis quelques temps déjà. Dans quelques jours, les internautes auront à disposition trois navigateurs web d’excellente qualité. Javascript Les performances de Javascript sont plus élevées que jamais, et c’est loin d’être fini : Firefox 4 utilisera le moteur ECMAScript de Flash Player, Tamarin. Le projet Webkit (le moteur de rendu utilisé par […]

Cibler Internet Explorer dans une CSS ? Oui, et sans hack.

Par Pierre Bertet

La méthode commence à être rodée : pour intégrer un design en CSS, on commence par le faire sur un navigateur « moderne », puis on corrige les différents problèmes rencontrés sur Internet Explorer, surtout dans sa version 6, qui commence à sérieusement à s’incruster. Pour cela, il existe plusieurs solutions. Eviter les embrouilles Avec la pratique, un certain nombre de réflexes se mettent en place, et on anticipe immédiatement les problèmes. Un float:left, avec une marge sur sa gauche ? Un display:inline placé dans la même déclaration permet d’éviter le bug de la double marge. Tous les navigateurs ignorent ce display:inline, […]

Faire cohabiter plusieurs versions d’Internet Explorer

Par Eric Le Bihan

Avec la version béta d’Internet Explorer 8, se pose la question habituelle aux développeurs et intégrateurs à chaque sortie d’une nouvelle mouture du navigateur de Microsoft : comment faire cohabiter plusieurs versions d’Internet Explorer sur son PC ? Habituellement faire cohabiter deux versions d’IE suffit, mais étant donné qu’une partie encore importante des internautes se cramponne au vieux navigateur IE6, il est souhaitable de pouvoir tester ses pages dans les trois dernières version du navigateur. 1ère étape : Installer Internet Explorer 8 version beta. Pour celà aller sur le billet de Pierre du 6 mars dernier ou encore plus rapide […]

Les pop-ups sont morts

Par Eric Le Bihan

Certaines pratiques ont la vie dure… La navigation par pop-up à l’intérieur d’un site en est une des plus tenaces. Pourquoi utiliser des pop-up ? Le raisonnement que j’entends souvent est : « le contenu n’est pas assez important pour une nouvelle page ». Ce raisonnement aussitôt contredit par des demandes de pop-up de 650px sur 800 px … Pourquoi tant d’acharnement ??!! Bien sur je ne parle pas des pop-up non sollicitées qui ne méritent même pas qu’on s’y arrête ne serait-ce qu’un instant, les navigateurs tels que Firefox ou Opéra, nous en débarassent sans que nous ne nous […]

Internet Explorer 6 : ID, class et background

Par Pierre Bertet

Puisque notre vieil ami ne semble pas décidé à céder sa place de leader, nous avons largement le temps de nous intéresser à certains de ses comportements si… particuliers. Internet Explorer 6 ne comprend pas la sélection de classes multiples en CSS : il ne prend en compte que la dernière classe. Il est néanmoins possible d’utiliser un ID et une classe combinée sans problème : .uneclasse.uneautreclasse{ /* IE6 comprendra : .uneautreclasse{} */ } #fixe.bonbon{ /* Pas de problème */ } Mais, d’après ce que je crois avoir compris : Si un sélecteur « id+class » est utilisé, et qu’un autre sélecteur […]

IE7.js v2.0 (Beta)

Par Pierre Bertet

Dean Edwards vient de mettre à jour son célèbre script IE7.js, permettant de corriger un paquet de limitations CSS / HTML sur notre navigateur préféré : Internet Explorer. Puisque IE7 est sorti, et que certaines limitations sont encore d’actualités, le script a été scindé en deux parties : IE7.js se limite maintenant aux améliorations d’IE7 qu’il apporte à IE5/6, tandis qu’IE8.js reprend les fonctionnalités d’IE7.js toujours absentes dans Internet Explorer 7. Un projet a été créé chez Google Code pour l’occasion : http://code.google.com/p/ie7-js/ Voici un bon moyen d’accompagner doucement ce vieux navigateur vers ses derniers instants, tout en profitant des […]

Articles plus anciens