28173 sujets

CSS et mise en forme, CSS3

CSS et vous...

Pages :
Bonjour Alsacréations et créateurs !

Pour mon premier sujet sur Alsacréations j'ai décidé de vous demander votre avis sur CSS. Et plus particulièrement : ce qu'il vous manque en CSS.

Vous avez probablement développé pas mal de sites, fait pas mal de tests. Et maintenant vous connaissez le CSS par coeur. Je suis sur que vous avez déjà râlé : "rrahhh, tu vas te positionner oui ?", "rraahhh, IE !!", "rrahhhh, c'est quoi ce problème encore ??"

Vous avez sûrement perdu des cheveux (personnellement je me suis rasé la tête depuis que j'ai commencé..), et je pense que maintenant, vous êtes prêt ! Prêt pour dire les améliorations que vous aimeriez voir apparaître.

Certaines règles vont apparaître en CSS3, mais peut-être que vous avez pensé à quelque chose qui n'est pas actuellement développé..

Je vais commencer :
Je trouve le positionnement en CSS mal foutu. A vrai dire je n'ai pas essayé autre chose que le static, absolute et relatif, pour garder une plus grande compatibilité. Et combien de fois je n'ai pas râlé devant le type de positionnement, ce qui serait pratique c'est avoir quelque chose permettant de désigner précisément par rapport a quoi on positionne l'élément (par exemple par rapport a un id).

Maintenant lancez vous ! (même si c'est pour me démolir, j'aime ça Smiley murf )
Salut,
Bah en fait la vraie limite de CSS c'est pas ses fonctions mais plutôt les navigateurs...
Tous les problèmes viennent de là je pense.
Quand les navigateurs (et surtout un que je ne citerai pas) apprendront à interpreter correctement CSS, c'est alors qu'on poura entièrement exploiter sa puissance.
Administrateur
Neovov a écrit :
ce qui serait pratique c'est avoir quelque chose permettant de désigner précisément par rapport a quoi on positionne l'élément (par exemple par rapport a un id).

Rappelez-moi quel jour on est ? Ah oui, vendredÿÿÿ ! Smiley biggol

Honnêtement, y'a pas tout à jeter : avoir un positionnement relatif à un autre élément pourrait être intéressant. Bien plus complexe que ce que CSS nous propose actuellement, mais intéressant.

Par contre, je n'aime pas du tout le "précisément" car c'est un terme qui n'a pas à s'appliquer au medium Web.
"Précisement" s'applique à un medium figé comme le Print, pas à un médium fluide comme le Web.
a écrit :
ce qu'il vous manque en CSS.

Des navigateurs qui connaissent et appliquent toutes les propriétés existantes de façon standards
Mikachu a écrit :
ce qu'il vous manque en CSS.

Des navigateurs qui connaissent et appliquent toutes les propriétés existantes de façon standards
+1
Ce qu'il me manque?

Un positionnement vertical plus simple Smiley rolleyes

La possibilité de faire des calculs pour les dimensions, par exemple:
margin-right:100%-80px;

La possibilité de faire des colonnes de texte, comme dans les journaux...
Chouette c'est vendredÿ

Concernant le css il me manque deux types de choses en fait.

1. Tout ce qui ne me permet pas d'assouvir mon désir irrépressible de controle absolu de l'interface et de celui qui l'utilise.

2. Un bon psy pour reconsidérer l'économie de mes désirs.


Quand tous les développeurs admettrons que :

. le point 1. est avéré

. le point 2. est nécessaire

alors l'ère du web3.0 pourra enfin se profiler...

... Smiley biggol
clb56 a écrit :
Chouette c'est vendredÿ

Jour des gnocchis !

clb56 a écrit :
Par contre, je n'aime pas du tout le "précisément" car c'est un terme qui n'a pas à s'appliquer au medium Web.
"Précisement" s'applique à un medium figé comme le Print, pas à un médium fluide comme le Web.

Tout comme Raphaël, je pense qu'il faut qu'on se sorte de la tête cette idée de précision lorsque l'on fait référence au média Internet. Il nous incombe d'agencer les informations et les divers éléments de manière harmonieuse et cohérente afin que le résultat soit "naturel" dans son développement et agréable à consulter.

Neovov a écrit :
Ce qu'il me manque?

J'aimerais bien ne plus être obligée de vérifier sur 4 navigateurs différents si la ligne de code que je viens d'ajouter à ma feuille de style est correctement interprêtée. Ne plus devoir (autant que c'est le cas maintenant) chercher des astuces pour passer outre un problème de compréhension navigateur ...

Voilà Smiley ravi
Tout à fait d'accord avec Raphaël sur la fluidité du média Web, et le danger -- et surtout la perte de temps ! -- d'une recherche du design « qui passe partout pareil », surtout si « partout pareil » signifie « au pixel près ».

À l'heure actuelle, le manque numéro 1 est, comme dit par les autres, un manque d'implémentation satisfaisante des normes existantes (CSS 2.1).

Pour mon petit bonheur personnel, je rajouterais deux ou trois choses, mais ça n'est pas vraiment capital, à vrai dire. À ce propos, je note :
Sylvain a écrit :
La possibilité de faire des calculs pour les dimensions, par exemple:
margin-right:100%-80px;

Tiens, pour la coup ça serait intéressant.
Sylvain a écrit :
La possibilité de faire des colonnes de texte, comme dans les journaux...

D'une, la lecture à l'écran et la lecture d'un journal ne fonctionnent pas forcément de la même manière. De deux, l'implémentation des colonnes de texte (voir l'implémentation de test dans Firefox, à ce propos) ne sera pleinement utile que si les navigateurs intègrent des fonctionnalités de césure automatique des mots... et on en est loin.

Dans les petits trucs que je trouverais utile, il y a en deuxième position la propriété x-height, ou tout moyen de fixer non pas la hauteur de caractère mais plutôt la hauteur de l'oeil de la lettre (qui conditionne la grandeur perçue du texte).

En première position : une gestion d'images de fond multiples pour un élément unique.
Raphael a écrit :

.. Pour confondre deux medias qui sont pourtant différents ? Smiley cligne
Cette propriété est prévue dans CSS3 :
http://www.css3.info/preview/multi-column-layout.html


Oui, cela peut-être très génant s'il fallait remonter à chaque fois. L'effet peut-être très intéressant notamment pour faire un faux livre, par exemple, où le texte continuerai sur la page de droite. Bref, je trouve que l'effet peut-être intéressant.

Pouvoir gérer plusieurs images en fond, ce qui permettrait bien des choses, ça serait aussi génial.
Administrateur
Sylvain a écrit :

Pouvoir gérer plusieurs images en fond, ce qui permettrait bien des choses, ça serait aussi génial.

Avec les pseudos-éléments :before et :after, on peut appliquer 3 images de fond au même élément

Cela rendrait possible les cadres arrondis sans ajout de structure HTML : http://www.nanoum.net/blog/5_before_et_after.html

... mais même IE7 ne reconnait pas ces élements Smiley decu

On en revient aux lacunes des navigateurs et non de CSS.
Modifié par Raphael (25 Nov 2006 - 11:30)
Sylvain a écrit :
La possibilité de faire des calculs pour les dimensions, par exemple:
margin-right:100%-80px;

Oui ca c'est une idée à laquelle je pensais encore récemment, ca simplifierait pas mal de choses dans certains positionnements.

Mpop a écrit :
En première position : une gestion d'images de fond multiples pour un élément unique.

Sylvain a écrit :
Pouvoir gérer plusieurs images en fond, ce qui permettrait bien des choses, ça serait aussi génial.

prévu en CSS3 : http://www.css3.info/preview/multiple-backgrounds/

Sylvain a écrit :
Oui, cela peut-être très génant s'il fallait remonter à chaque fois. L'effet peut-être très intéressant notamment pour faire un faux livre, par exemple, où le texte continuerai sur la page de droite. Bref, je trouve que l'effet peut-être intéressant.

Ca permettrait surtout de faire un article court en hauteur mais sur plusieurs colonnes de sorte qu'en 1600x1200 on n'ait pas des lignes de 3km à lire.

Raphael a écrit :
On en revient aux lacunes des navigateurs et non de CSS

Le samedÿste que je suis aujourd'hui ira même jusqu'à dire qu'on en revient aux lacunes d'internet explorer Smiley lol
Mikachu a écrit :
Ca permettrait surtout de faire un article court en hauteur mais sur plusieurs colonnes de sorte qu'en 1600x1200 on n'ait pas des lignes de 3km à lire.

Pour info, c'est déjà possible de restreindre la longueur de ligne... en restreignant la largeur de la colonne (certes unique) de texte. Et pour faire les choses proprement :
div#contenu_article {
	max-width: 35em;
	margin: 0 auto;
}

Et voilà le travail. Smiley smile
Au final, comme souligné par presque tout le monde dans ce fil, le problème le plus urgent c'est le support par les navigateurs. Il y aurait pas mal d'améliorations des CSS intéressantes à faire (dont beaucoup sont déjà en chantier pour CSS3), mais l'essentiel est déjà dans CSS 2.1. Ce sont surtout les implémentations qui posent problème.
Ca a déjà été cité dans le topic, mais bon...

- Meilleur support des alignements verticaux
- Formules mathématiques pour le positionnement (je trique à l'idée d'un width: (100%-30px);)
- Pouvoir utiliser plusieurs backgrounds sur le même élément

Mais surtout :

Ne pas devoir ouvrir FF, Opera, IE, et compagnie pour tester LA MÊME PAGE !
Mais disons que ça, c'est impossible ! Les limites des anciens navigateurs étant déjà fixées, même si on sortait un super CSS de la mort qui tue et que FF3, Opera 10 et IE 8 le supportaient totalement, on devrait quand même avoir recours à des hacks ou que sais-je pour...le support des anciens navigateurs ! Pour ce point, on peut dire que c'est définitivement mort, tant il y a de navigateurs utilisés à l'heure actuelle !
Modifié par SolykZ (25 Nov 2006 - 22:10)
mpop a écrit :

Pour info, c'est déjà possible de restreindre la longueur de ligne... en restreignant la largeur de la colonne (certes unique) de texte. Et pour faire les choses proprement :
div#contenu_article {
	max-width: 35em;
	margin: 0 auto;
}

Et voilà le travail. Smiley smile

Sauf que si tu restreint la largeur en une seule colonne ton contenu sera lisible mais nécessitera alors un défilement. L'intérêt du multicolonne est du coup d'occuper l'écran en plusieurs colonnes lisibles en donnant quasiment accès à tout le contenu en un seul coup d'oeil. Le problème demeurant plus compliqué à gérer lorsque le texte dépasse ce volume, ou il faut faire plusieurs lignes de colonnes (ça fait un peu tableau ce que j'explique non ?
Smiley langue )
Modifié par Mikachu (26 Nov 2006 - 00:56)
Modérateur
bonjour,

pour le multi colonne , ce qu'il semble manquer c'est le : 


column-height: screenheight;


et/ou ,


column-max-height: screenheight;


Avec toujours les incoherences d'affichage que ça peut entre un telephone et un pc de bureau.... , c'est vrai que pour imprimer c'est pas mal , mais peut-etre deroutant entre l'article affficher et ce qui sort sur l'imprimante , a mon avis faut prevenir Smiley smile .

et pour les alignement verticaux , est ce vraiment necessaire ? ,
quel avantage a centré une ligne de texte dans une "zone" ou fausse colonne" qui fait 2 fois et demie la hauteur de la fenetre du navigateur ?

De plus il y a quelques posiibilités , le display:table et compagnie , qui est fiable dans les navigateurs autre que IE. le passage des balise inline en inline-block ou block en inline avec un zoom pour IE (deja plus restrictif ) et puis il ya aussi a toute epreuve pour centré une page, le tableau a une cellule.
pour se passer du tableau une cellule il y a donc le display:table (+ ou table-cell) pour les navigateurs respectueux et pour IE , 3 conteneurs avec height:100% pour le premier , position:relative pour les suivant avec top:50% puis top: -50%; ..... (qui a l'opposé des marges negatives et un doctype strict ne fait pas disparaitre le contenu dans la partie haute de la fenetre dans IE 6 ) .. enfin , ça c'est de la bricole , car 3 div pour centré du contenu , c'est un tableau debalisé ! <table><tr><td></td></tr></table> au lieu de <div><div><div></div></div></div>, le tableau reste encore la meilleur solution dans le cas d'une page centré verticalement . de plus cette unique cellule saura ne pas imposé une certaine rigidité a la mise en page si l'on souhaite revoir la charte graphique. , il ne fait office que de conteneur principale .

pour les marges en % avec + ou moins de pixels (->le positionement relatif) , il est aussi possible de s'en sortir , tant qu'on ne cherche pas a faire des trucs trop tordu.
une page de test d'affichage , pas tester en condition de veritable page , donc a priori assez beugeu . (reliberer l'espace "physique" par une marge negative ou l'element ne s'affiche plus est inefficace sur un flottant , et ne traite que la moitié du probleme).

Enfin c'est a voir au coup par coup , une fois de plus , c'est un choix a faire en connaissance de causes et d'effets .
Une page test pour vous deblayer le terrain pour vos essais.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html 

xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"><head><title>margin % - + pixels</title><style 

type='text/css'>#tete {background:red;
width:50%;
}
#tete span {
background:pink;
float:right;
width:80px;
}
#main {
background:blue;
width:20%;
margin-left:auto;
margin-right:50%;
position:relative;
left:-80px;
color:#fff
}
#corps {
background:yellow;
margin-left:50%;
position:relative;
left:-80px;
margin-right:-80px;
zoom:1;/* IE */
}
#pied {
background:#eee;
overflow:hidden;
zoom:1;
}
#pied span {
float:left;
background:#999;
width:20%;
margin-right:25%;
position:relative;
right:30%
}
#pied span.gauche {
right:-60%;
background:#aaa;
}
html , body  {height:100%;margin:0;padding:0}
#median {
position:absolute;
left:50%;
border-left:1px solid;
padding-top:20%;
}
</style></head><body>
<div id="median"><b>--> ligne centrale </b></div>
<div id="tete" ><span>float 80px;</span>rouge width 50% </div>
<div id="main" >blue margin-right 50% + 80px ;</div>
<div id="corps" >jaune margin-left 50% - 80px et margin-right de -80px pour recupere les 80px perdu a l'ecran , si on 

peut dire.</div>
<div id="pied" ><span class="gauche">pied gauche</span><span>pied droit</span></div>
</body></html>


A y reflechir , on s'aperçoit bien que les lacunes et inpossibilité a mettre en application proviennent des navigateurs .

Par ailleurs il faut bien se defaire de l'idée que le site ne sera vu que sur un pc de bureau avec tel dimension d'ecran , tel plug-in et tel fonctions activées. ... surement difficile d'expliquer ça a un graphiste ou designer .

Je crois que l'on a deja tout ce qu'il faut (et plus) en theorie et il ne s'agit que de mise en forme et pas d'un langage de programation ...

multiplier les possibilité finirait par obliger a faire une feuilles de style pour chaque medias ...

y'a toujours flash pour les accrocs du pixel prés , partout pareil si plug-in et compatible ... Smiley lol

++
Modifié par gcyrillus (26 Nov 2006 - 03:54)
gcyrillus a écrit :
Je crois que l'on a deja tout ce qu'il faut (et plus) en theorie et il ne s'agit que de mise en forme et pas d'un langage de programation...

C'est vrai qu'avec le display: table-cell pour le centrage vertical. Et pour les opérations dans les dimmensions, pas sûr à la réflexion que ça soit si utile que ça. Quels seraient les usages ?
- faire un bloc qui fait 100% de la largeur ou de la hauteur de page, moins quelques dizaines de pixels sur l'un ou l'autre bord : ça se réalise parfaitement bien, à l'heure actuelle, avec le positionnement absolu.
position: absolute;
top: 0; bottom: 50px;

(bien sûr, pas implémenté dans IE6, à voir pour IE7).
- pouvoir donner un padding à un bloc dimmensionné en pourcentages sans agrandir ce bloc : là, il serait plus pertinent de demander au navigateur d'appliquer le modèle de boite traditionnel pour ce bloc-là... et il me semble que ça fait partie des brouillons de CSS3.

Au final, les manques sont :
- à 80% dûs aux implémentations déficientes des navigateurs ;
- à 20% dûs à des insuffisances de CSS 2.1, insuffisances que CSS3 semble venir combler sur de nombreux points.
Raphael a écrit :
Rappelez-moi quel jour on est ? Ah oui, vendredÿÿÿ ! Smiley biggol


Euh.. j'suis un p'tit nouveau, il se passe quoi le vendredi Smiley lol ?

J'ai peut-être craqué, mais passer une semaine a côté de quelqu'un qui renie les standards, Firefox, et le W3C ça n'aide pas vraiment...

Raphael a écrit :
Par contre, je n'aime pas du tout le "précisément" car c'est un terme qui n'a pas à s'appliquer au medium Web.
"Précisement" s'applique à un medium figé comme le Print, pas à un médium fluide comme le Web.


Mmm.. Je ne vois pas pourquoi le web devrait être forcément fluide. Tout dépend du site en question... Si il est purement graphique il quasiment impossible de faire quelque chose de "fluide", mais ou le pixel près est plus adapté.

Mikachu a écrit :
Des navigateurs qui connaissent et appliquent toutes les propriétés existantes de façon standards


Je suis d'accord, mais je pense que l'on peut rêver...

Sylvain a écrit :
La possibilité de faire des calculs pour les dimensions, par exemple:
margin-right:100%-80px;


Je suis d'accord, je l'aurai plutôt illustré avec 
heigth: 100% - 60px;


Aujourd'hui j'ai encore envie de râler alors :
Les float ça m'énerve...
J'en reviens au positionnement, mais on ne peut pas positionner un float comme on le veut. C'est comme ça et c'est tout.

Et comme je crois l'avoir relevé : les modèles des boites... je n'aime pas vraiment le modèle du W3C, c'est bien beau de se soucier du contenu, mais quand je dis qu'une boite fait 400px de large c'est pas pour qu'elle en fasse 400 + 20 de padding...

Bon sur ce je vais aller me coucher...

Smiley biggol
Pages :
Sujet clos
Aller à