Lecture
Hack CSS Opéra · 18 janvier 2007, 19:38 par Romuald
Après avoir lu un sujet sur Alsacréations pour un hack CSS sur Opéra, j’ai ressorti d’outre tombe ma bonne vieille bidouille que j’avais trouvé à l’époque.
/*...........css hack…........*/
a{
color:green;/* tous */
}
*>a{
color:red;/* tous sauf ie – star hack */
{
:;color:black;/* opera seulement */
}
}
*{/*pour que les prochains styles fonctionnent sur opera*/}
Attention, à placer en fin de fichier, car ensuite, Safari ne lit plus, du moins, je n’ai pas pu tester, mais il semblerait bien que cela soit le cas. On peut imaginer un hack CSS pour Safari donc.
Un article du genre CSS XHTML - Le 18 jan 2007 19:38 Commentaire [2]
Hack CSS IE7 · 2 novembre 2006, 14:02 par Romuald
IE7 a lui aussi ces petits défauts qui nécessitent quelques corrections.
.maClass{
color:black;
!color:green;
}
*> .maClass{
color:red;
!color:blue;
}
Les navigateurs standards auront du rouge, IE6/5 du vert et IE7 du bleu.
MàJ :
Plus simple :
.maClass{
color:red;
!color:green; /* tous les IE */
_color:blue; /* tous les IE sauf le 7 */
}
Un article du genre CSS XHTML - Le 02 nov 2006 14:02 Commentaire [5]
Petit test d'opacité · 26 octobre 2006, 20:18 par Romuald
Avec la récente sortie d’IE7 voilà que je m’amuse à faire des tests.
Aujourd’hui, ce sera l’opacité, un truc qui me démange depuis un certain temps.
La page de test d’opacité
Nous avons un PNG 24bits avec un calan alpha (transparance) qui se dégrade de 0 à 100%.
J’ai prodécé au test du bon vieux filter, IE ne supportant pas opacity:; chose étant normal puisque du CSS3.
Dans l’ensembe, le respect est assez bon, les couleurs sont respectés, mais lorsque l’on applique le filter alpha sur l’image, cela semble créer un petit bug.
On peut remarquer qu’IE gère mieux le déplacement d’image avec un peu d’opacité contrairement à Opéra (qui gère plutôt bien dans l’emsemble) et FireFox qui ne donne pas un rendu agréable.
Nous voilà donc avec un navigateur qui gère donc une bonne fonctionnalité pour le futur (il était temps diront certains)
Petites notes :
- L’opacité ne fonctionne ne pas sur le tag “p”, dommage
- “min-width:;” fonctionne, intéressant.
- margin:auto; fonctionne toujours (étant habitué au mode quirck)
IE7 et le CSS · 20 octobre 2006, 22:03 par Romuald
– Hey, IE7 est sorti !
– Hourray ! \o/
– Il respecte les standards en plus il parrait (tu sais, ton trucs bizarre css touça) !
– Ah ouais ? Hourray ! \o/
Attand, je test !
body *:hover{color:red;}
– Alors ?
– He’s alive !
– Hourray ! \o/
– body *:active{color:green;}
body *:focus{color:yellow;}
– Alorrrrrs ?
– ... ! – /o\ ohhhhh…
L’espoir vivait, mais il est retombé.
Même si IE7 qui est sorti hier en version anglaise respecte mieux les standards qui existe depuis 1999, mais pas parfaitement, 7 ans de retard pour un produit tout neuf, où est l’erreur ?
Un article du genre CSS w3c - Le 20 oct 2006 22:03 Commentaire [2]
Openweb accessible de nouveau · 7 septembre 2006, 09:42 par Romuald
Openweb.eu.org est de nouveau accessible. Pas de nouveau contenu, mais de retour quand même.
Etrange disparition tout de même, depuis plusieurs mois.
hover et opacité · 13 août 2006, 19:49 par Romuald
Attention, article webdesign.
Il est d’un effet sympathique que je convoite avec abus ces derniers temps, le changement d’opacité sur les images au survol.
Il est simple d’utilisation, fonctionne avec juste du CSS et pour plein de navigateur.
L’idée met venu en voulant donner un effet au lien en image qui soit sympa, alors j’ai fait un
a:hover img{
opacity:.5;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity:0.5;
}
(si vous connaissez d’autres propriétés cachés, n’hésitez pas)
et donc d’avoir en html
<a href="#"><img src="#" alt="#" /></a>
Vous pouvez avoir l’effet sur mon blog en regardant les gravatars (dans les commentaires donc) ou un effet similaire sur le blog sibellia pour faire des liens sur des images ou des zones d’images tout jolis.
Un article du genre XHTML CSS - Le 13 aoû 2006 19:49 Commentaire [2]
L'égo, c'est bon pour le moral · 29 juin 2006, 20:13 par Romuald
Moi aussi, plus jeune j’ai adoré les légo ! Euh, non, ce n’est pas ça…
Ah.. oui ! Bon, je vais me remonter le moral parce que ce n’est pas mon job qui me le fera à ma place en ce moment après un an de bon et loyaux service, être considéré comme un moins que rien après s’être bien usé la santé, à rester parfois des nuits complètes, tout ça pour… Rien ! Je ferais mieux d’aller remplir des rayons dans un supermarché, je serais mieux considéré, mieux payé et bien plus heureux.
Voici le log (Désolé Raker) :
Raker:
la j’ai un souci css
mais j’ai rien dit, ca pue et je comprends pas
SANCHEZ:
?
Raker:
y’a une image qui est resizé par le css, je sais pas comment, je sais pas pourquoi
SANCHEZ:
largeur défini par un % ?
Raker:
l’image d’origine fait 508 px de haut, dans FF ca affiche 140 px de haut
et le mec a défini la hauteur avec du padding O_o
SANCHEZ:
meuh
la hauteur du bloc conteneur ? ou de l’image?
Raker:
je pense que ca doit etre la hauteur du bloc et l’image se fit au bloc
c’est pas dur c’est le css du site/page.php
on est deja 3 dessus a essayer de comprendre comment la hauteur est gérée
SANCHEZ:
où ? en haut ?
Raker:
le cadre bleu la
SANCHEZ:
<—64 couleurs, monteu un peu
Raker:
tout en haut
SANCHEZ:
ah oui, c’est bleu xD
Raker:
la ou y’a le titre
SANCHEZ:
la hauteur n’ets pas défini
si tu resize, la hauteur change
Raker:
l’image fait 800×506 et a l’affichage ca sort du 800×140
SANCHEZ:
c’est padding-top+taille-texte+padding-bottom+margin
Raker:
mais non pourtant l’image garde toujours son rapport 800×140 quelle que soit le comportement de ma fenetre
SANCHEZ:
l’image n’est pas resize
elle est calé dessous le bloc
Raker:
houla
ok
je viens de comprendre
tain tu roxx :)
Un article du genre blog CSS - Le 29 jui 2006 20:13 Commentaire [1]
Internet explorer PNG et bug en tout genre · 17 juin 2006, 18:03 par Romuald
Quiconque touche un peu à la programmation web sait que le PNG peut donner des crises de fou rire en regardant par erreur le résultat sur un navigateur non moderne (que l’on nommera.. euh.. comme ça au hasard, Internet Explorer).
Il existe alors un script pour faire passer la transparence des PNG (visible sur ce blog entre la lune et le clocher, mais il faut un navigateur qui va bien).
Le script (javascript) en question utilise la fonction :
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='scale'
qui s’utilise dans du CSS, soit donc en inline avec un style=”” dans un tag, remplaçant le background préféré habituelle, soit dans votre fichier CSS.
Un coup de moteur de recherche préféré pour trouver la version JavaScript qui permet de modifier les PNG à la volé dans un tag <img />
Le souci c’est que ce script, sur les images misent en liens, le curseur « pointeur » disparaît.
Pour ce faire, il vous faut donc en CSS appliquer un idiotique code à la hauteur du navigateur posant problème :
a{cursor:pointer;}