28172 sujets

CSS et mise en forme, CSS3

Peut on utiliser des techniques css3 et des alternatives javascript ?

Bonjour,

Pour un nouveau projet, j'aimerais utiliser css 3 principalement pour ses fonctions de border radius et font face.

J'ai donc 2 principales questions :

1. Comment utiliser css 3 ? Y a t il des spéficités à connaître ou peut on directement écrire des propriétés css 3 dans une feuille de style ?

2. Y a t il moyen d'utiliser des techniques alternatives pour IE ? Par exemple, faire en sorte que FF, Safari & autres webkit se basent sur les propriétés font face de css3 et que IE passe par un javascript cufon ? Peut on utiliser conjointement des techniques css 3 et des alternatives javascript et faire en sorte que les navigateurs "choisissent" d'utiliser d'abord css 3, et sinon la technique javascript ?

Merci pour vos réponses !!!
Administrateur
Hello,

CSS3 est à l'étape de brouillon pour de nombreux modules.

Donc :
- les navigateurs (même récents) ne sont pas forcés d'implémenter cette version
- certains l'implémentent en utilisant des préfixes (-moz-, -webkit-,...) avant le nom de la propriété CSS3
- les navigateurs anciens ne l'implémentent pas du tout

Pour ce qui est de border radius, nous avons un tuto en ligne (cela te donnera déjà une idée pour la procédure de mise en place)... et celui sur font-face va arriver prochainement Smiley cligne

Bonne chance Smiley smile
Pour les @font-face, IE est un des premiers àles avoir implémentés.
Le soucis c'est les formats des polices (et aussi les histoires de droits).
Et perso j'utilise une site qui fournit des packs de polices dans tous les formats, libre de distribution enfin des packs près à l'emplois (y'a même un générateur !) : http://www.fontsquirrel.com/fontface

Pour le reste, en gros ça va se résumé à du code dans le style

.selecteur
{
    box-shadow: 1px 1px 3px #ccc; /* opera 10.5 ok */
    -webkit-box-shadow: 1px 1px 3px #ccc; /* safari & chrome */
    -moz-box-shadow: 1px 1px 3px #ccc;

    border-radius : 20px; /* chrome, safari 4 et opera  10.5 */
    -webkit-box-shadow: 20px; /* old webkit */
    -moz-box-shadow: 20px;

    transform : ...;
    -webkit-transform : ...;
    -moz-transform : ...; /* ff 3.6*/
    -o-transform : ...; /* opera 10.5*/
}

Voilà après pour chaque propriété faut regarder où en sont les browsers en question.

Puis IE... ah IE... tant pis Smiley langue Sérieusement y'a pas mal de hack à base de filter.
@Raphael

Merci pour le conseil. J'attends avec impatience le prochain tuto d'alsa sur font-face!!!!!! Smiley smile



@MoOx
Merci bcp pour ton lien vers fontsquirrel. J'y ai fait une excellente découverte et j'espère utiliser leur système rapidement.
nforum a écrit :
...
2. Y a t il moyen d'utiliser des techniques alternatives pour IE ? Par exemple, faire en sorte que FF, Safari & autres webkit se basent sur les propriétés font face de css3 et que IE passe par un javascript cufon ?
Merci pour vos réponses !!!


Bonjour,

Le probleme de IE vient qu'il n'accepte que les fontes de type EOT , mais depuis longtemps deja.
Si l'on en croit cette page (en) : 6 ways to improve web typo(voir n°5) 90% de vos visiteurs peuvent profiter de @fontface remis a jour pour CSS3 .

Un tableau recapitulatif sur wikipedia interessant : http://en.wikipedia.org/wiki/Web_typography#Browser_support

Pour les utilisateur de windows (et pressé) qui ne souhaitent utiliser une de leur fontes true type (fetiche ?) ,
-un convertisseur opentype (pour IE): telechargeable ici : ttf2eot]tt2eof qui fonctionne en ligne de commande ,

- un fichier batch (toujours pour windows) :ttf2eot.bat (copier le fichier texte puis enlever son extension .txt ) permet facilement de convertir un font ttf en font eot en les renommant puis de lancer IE pour tester la conversion . ,

- le fichier :test.html peut-etre utile si vous ne créer pas le votre .

- un raccourcie vers la commande dos(cmd.exe) permet de lancer le processus d'un coup .(source: http://yidille.free.fr/plux/valign/?26-de-vos-visiteurs-meme-pas-peur#make_it_fun ).

Sur ce coup , chrome reste sur le carreaux ... pour le moment .

Sinon , comme on le ferait pour une police 'dites standard' , si la police proposée via fontface passe pas , on en propose une autre probablement dispo sur le pc de l'internaute , puis une troisieme ... (revoir les propriétés de font-family et et les serie de fontes 'compatibles/interchangeables').

L'avenir semble vouloir mettre en avant et promettre les police de type WOFF comme standard ? , plus adapté a un usage web . Serait-ce pour demain ou après demain ?

GC
J'ai trouvé un article en anglais très intéressant qui propose différentes étapes permettant au site internet de vérifier les éléments suivants :
1. vérifier si la typo souhaitée est disponible sur l'ordi de l'utilisateur.
Si non,
2. utiliser la propriété font-face de css3.
Si css3 n'est pas supporté par le navigateur,
3. utiliser un javascript de type cufon.

J'ai testé, et malheureusement, le script permettant de vérifier la disponibilité d'une font sur l'ordi de l'utilisateur (grace à un plugin jquery) ne semble pas fonctionner.
Mon cas est réglé. Je conseille vivement le tutorial suivant qui a répondu à 100% à mes attentes!!

(Edit par Heyoan : merci de ne pas mettre des liens de 10km de long qui explosent la mise en page du forum. Smiley cligne )
Modifié par Heyoan (14 Jan 2010 - 16:22)
Sujet clos
Aller à