CSS + WordPress + Web Design
bd cinéma couleur css firefox google gratuit ie6 interface iphone javascript jeu musique navigateur new york photo photoshop police vidéo wordpress
24 Jan
Mail d’une amie :
J’ai une colle pour toi :
1 – 4 colonnes de 240px => largeur totale 960px2 – je rajoute un margin-right de 5px et soustrais 5px de la largeur de la colonne => largeur totale 960pxEt pourtant dans le 2ème cas, visuellement la largeur totale est inférieure à 960px.How is it possible ?
Elle n’était vraisemblablement pas bien réveillée parce qu’elle connaissait la réponse, mais je vais développer la méthode ici pour ceux qui auraient des soucis.
J’avais aperçu Bootstrap peu après sa sortie, sans trop accrocher. Pour cause : c’est un framework HTML-CSS. Et comme beaucoup de frameworks, il mélange contenu et mise en page. Ex : <div class=”span6″> pour un élément qui fait 6 colonnes de large. La séparation contenu (HTML) et mise en page (CSS) n’est plus garantie. Et l’intégrateur têtu mais exigeant que je suis ne peut l’accepter.
13 Jan
Dans la famille des “Cadeaux Web Design qu’il vaut mieux donner que jeter à la poubelle”, voici une petite liste d’astuces CSS glanées au fil du temps. Elles est destinée à tous les niveaux, et peut être agrandie par vous-même en m’envoyant vos supers astuces, ou bien par moi-même si jamais d’autres idées lumineuses me reviennent…
8 Apr
Aujourd’hui c’est le CSS Naked Day! Virez votre CSS et montrez nous votre code HTML pour voir si il est beau! Bon, j’ai raté les éditions précédentes. Mais avec mon nouveau thème, je voulais tenter le coup!
The idea behind this event is to promote Web Standards. Plain and simple. This includes proper use of (x)html, semantic markup, a good hierarchy structure, and of course, a good ‘ol play on words. It’s time to show off your .
On April 9th, simply remove all CSS from your website, stripping it entirely of its design.
Le site sera sans CSS pendant 48 heures. En effet, c’est le 9 avril international, c’est à dire, à n’importe quelle endroit sur terre, pour n’importe quel fuseau horaire.
24 Feb
Si vous êtes vous aussi ennuyé de temps à autre par la possibilité dans Google Chrome de redimensionner les textarea à la guise de l’utilisateur (ce qui, en soit, est très bénéfique pour l’utilisateur parce qu’il a la main sur un élément de l’interface, mais qui, du point de vue du designer, peut amener à des aberrations graphiques), alors voici une astuce en CSS.
textarea{ resize:none;}3 Aug
Davantage pour leur sémantique que pour leur pouvoir en SEO, il est intéressant et pratique d’utiliser les balises HTML suivantes. Elles permettent de donner du sens au contenu d’un site, ou plutôt à son code.
Lire la suite →
20 Jul
Je le dis et je le répète : il faut arrêter de s’acharner à faire fonctionner parfaitement son site sous IE6. Chaque semaine, il y a un nouvel article qui prône cette idée, et c’est très bien.
Pour ceux qui ne le sauraient pas encore : la réponse est non.
Notez l’adverbe “exactement”. Parce que d’un côté, il faut que l’utilisateur puisse reconnaître un site, quel que soit le navigateur utilisé. Mais des différences (plus ou moins) légères dans le graphisme sont non seulement tolérées mais parfaitement admises. Ne pas avoir de coins arrondis (par CSS ou PNG), de dégradés complexes (par PNG), des ombres portées… sous IE6 n’est pas un problème.
C’est surtout qu’un utilisateur d’IE6 ne verra aucune dégradation dans sa version vu qu’il ne verra pas la “bonne version”!
Et puis d’abord, tout le monde n’a pas toutes les polices utilisées sur un site (Arial inexistant sous Linux ?), donc il y a déjà obligatoirement des différences, et des grosses différences : la typographie c’est au moins la moitié du design.
Lire la suite →
10 Jul
Je dis BD mais c’est avant tout une expérimentation très poussée de la pseudo-classe :hover, sans image, une sorte de labyrinthe typographique.
Amusez-vous.
1 Jul
L’objectif de Google, avant tout, c’est la performance. Ils publient d’ailleurs des conseils pour optimiser l’affichage du navigateur.
A la trappe les standards, la beauté, la clarté du code. Extraits choisis.
Mettre uniquement des .class et des #id et pas de a{ color:#0072c;} ou de input{ font-family:Arial,sans-serif;}. Mouais. Faut mettre une classe sur tous ses liens alors ? Génial.
En gros, pas de a.maClasse et de p.maClasse. Créer plutôt 2 classes : .maClassePourUnLien et .maClassePourUnParagraphe, même si les deux classes partagent les mêmes propriétés, à une près (sinon quel intérêt de les différencier). Mouais, bof. Si je veux que .maClasse soit d’un style particulier mais que les liens ayant .maClasse aient une propriété différente, je vais pas m’amuser à créer une autre classe juste pour ça.
Je reprends le mauvais exemple de Google :
/* Ne pas mettre */
ul li {color: blue;}
ol li {color: red;}
/* Mais mettre */
.unordered-list-item {color: blue;}
.ordered-list-item {color: red;}Bien sûr. Je vais mettre une classe sur tous mes <li>…
Pas de :hover en CSS mais des onmouseover en JS. Et si le gars a pas de JS ?
Bref, pour optimiser votre code, mettez des classes sur tous vos éléments! Merci Google!
29 Jun
Pour savoir ce que l’on peut utiliser sans craindre une incompatibilité entre navigateurs, on peut se fier à ces tableaux des propriétés HTML, CSS, DOM et ECMAScript. Il manque juste Webkit dans le lot.
Il y a par ailleurs un tableau résumant tout.