Forum Alsacréations : CSS et Standards Web

Eric

Ma modeste participation.

Testé sous WinXP : ie6 - nn7 - opera 7.54 - firefox 1.0

Eric

________________________________________________
Jep

Mon approche ce base sur l'utilisation de la propriété border avec des epaisseurs très grandes sur des élements de type block sans aucun contenue.
Il y a un très léger bug sous IE (un "petit" decrochage de 1px au centre des carrés) qui n'admet pas que les éléments soient vide.
Les balises p (11) affiche les couleurs et les balises div (2) servent de séparteur pour faire un retour à la ligne (a cause de la propriété float apliquée aux balises p pour les aligner tout en leur laissant des propriétés de block)

Tu peut me considérer hors concours car j'ai la flème de re-indenter mon code

A+
Jeremie

PS : je te fait grace de la solution à 54 octet :

<img src=http://alsacreations.com/divers/mondrian.jpg>

;)

____________________________________________________________
An-archi

Bon, voilà ma participation au concours.
J'espère bien entendu respecter ses règles.
Il passe avec :
- IE 6
- Firefox 1.0
- Opera 7.6
- Safari via iCapture

A priori, l'ensemble est valide XHTML strict/CSS.

C'est assez délicat de trouver un juste milieu entre optimisation et facilité de lecture.
Où commencent-elles et où finissent-elles ?! :o)

J'ai essayé de coller au maximum aux petits détails de l'image fournie et vu que les formes ne sont pas forcément des losanges, cela a nécessité plus de div... :o)
J'ai d'abord voulu cherché du côté des caractères avec un empilage et des font-size et font-color différents, mais j'ai bien vite laissé tombé, ne trouvant pas ce que je voulais, et partant du principe que la police utilisée n'est pas _obligatoirement_ installée sur le poste de l'utilisateur.

Les caractères écartés, je dois dire que je ne voyais pas trop de solutions.
Donc j'ai cherché rapidement, sans essayé de réfléchir : bide.
Après un peu de réflexion et quelques souvenirs sur des tests de bordures "qu'elles étaient mi-moches", j'ai trouvé cette solution.
La rencontre de deux rectangles donne lieu à une diagonale !

Alleluia !!! \o/

Voilà la petite histoire, je ne pense pas être très original, mais bon... :o)

Pour ce qui est des styles, j'ai essayé tant que possible de séparer les attributs par type quand cela engendrait de trop grandes lignes.
J'ai également ajouté la petite ligne blanche en haut, parce que "je chipotte". Ça me vaut un div de plus et une règle supplémentaire...
Pas grave. :o)
Le "line-height:0%" sert à supprimer l'erreur d'interprétation de IE qui ne voulait pas me faire une boîte vide sans hauteur nulle.
#d7 permet de masquer les débords des autres div.
Par contre, j'ai préféré ne pas modifier l'indentation car je pense qu'un code ne mérite pas d'être publié s'il n'est indenté (j'aime ce qui est lisible).
Pour les couleurs, je me suis déjà expliqué sur le forum, mais j'ai essayé de reprendre ce que je crois être les "bonnes" couleurs.
Bon après, si je me plante, j'aimerais bien qu'on me le dise, hein... :o)

Bon aller, j'arrête de tergiverser, je n'arrive pas à envoyer ce fichier. Je suis sûr qu'il y a encore un bon paquet d'optimisations à faire, mais tant pis. Je me lance.

Voilà, j'attends avec impatience de voir ce que nous aurons concocté les autres "joueurs".
Merci pour ce genre d'exercice particulièrement stimulant et à bientôt !

__________________________________________________________________________
Cktoon

voilà ma page pour le concours....

J'ai utilisé la technique des bordures ave des blocs vides pour les diagonales.
Il faut tatonner un peu pour trouver le bon résultat en terme d'épaisseur / rendu désiré, mais au final... c'est plutôt ressemblant !

Bon, au fait... qu'est-ce qu'on gagne ? lol

Cktoon

__________________________________________________________________________
Jb-gfx

Je suis embété avec le fichier pour le concours de code, j'ai effacé
mon entrée de mon serveur et la version qui me reste est modifiée.
Je te joins une copie de la seule version qui me reste mais elle est
différente de celle que je t'avais passé par MP sur le forum

- Compatible IE6, Opera 7.2, FireFox 1.0, Netscape 7.2.
- Pas testé sous Safari.
- Doctype XHTML 1 Strict (passe le validateur du W3C).
- Poids du fichier 1 416 octets

_______________________________________________________________________________
Elv

Voila ma modeste contribution pour le concours.

En bref, le fichier fait moins de 1Ko, est en xhtml 1.0 strict valide, a des css valides, et passe sous les navigateurs cités dans l'énoncé (Safari non testé car iCapture semble en panne. Une version plus ancienne du fichier passait parfaitement, mais ça ne veut rien dire)

Quelques explications sur la méthode...

Pour la structure je m'en sors avec 9 tags p, plus un div contenant le tout pour rogner sur les bords droits et gauche.
Au départ j'ai découpé en 9 cases principales, puis je me suis aperçu qu'on pouvait faire moins grâce à une grosse case(cf .gif joint, case E)

Au niveau compression de code, quelques trucs habituels :

- couleurs du type #abc, sauf "red" qui est plus court
- les cases d'une seule couleur sont quand même faites avec des borders plutôt que des fonds, car border-color:#222 est plus court que background-color:#222

- les déclarations sont groupés par styles communs, pas de répétition
- id plutôt que class

Et quelques astuces moins connues, ou du moins que j'ai découvertes grâce au concours

- Au départ j'utilisais des div partout, et comme un élement type block suffisait je me suis dit que <div id="a"></div> etait plus long que <p id="a"></p>. Là je me suis souvenu des élements "vides" comme hr ou br, et après test j'ai découvert que <p id="a" /> fonctionnait. Comme on ne se soucie que de navigateurs récents l'espace avant le slash peut sauter, au final chaque élement est très court : <p id="a"/>

- j'ai essayé <title/> mais cela donne une page blanche sous IE6...

- j'ai aussi essayé d'utiliser le body avec des dimensiosn fixes plutôt qu'un div conteneur, mais cela ne marchait pas partout

- avec des unités en em je pensais avoir des chiffres plus courts, mais comme j'ai du utiliser des décimales... Le gain n'est que de 4 malheureux octets C'est avec les "ex" que j'ai obtenu le meilleur ratio car ils font en gros la moitié des em, un -.5em devient -1ex et un 28.5em devient un 57ex.

Je crois que c'est tout... Je n'ai pas cherché absolument à caser des tonnes de tags par ligne. Un seul selecteur de style par ligne, je pense que le code reste bien lisible

Très bonne idée ce concours, ça fait réflechir d'une autre manière

_____________________________________________________________________________
Ganf

J'ai testé MSIE 6.0, Firefox 1.0 PR, Opera 7.54 et Konqueror 3.2.3 ; le
tout sous Linux (via wine pour MSIE). Je me base sur konqueror
concernant la compatibilité Safari vu que icapture est hors de
fonctionnement depuis quelques jours.
Pour information à partir du fichier Mozilla théoriquement correct, la
compatibilité MSIE coute 14 octets (line-height:0;), la compatibilité
konqueror coute 8 octets (width:0;) et la compatibilité Opera en coute
10 (padding:0;).

Pour la petite explication j'ai simplement découpé l'image d'origine en
sept carrés avec des bordures de couleur différentes. Sauf erreur de ma
part les bordures sont les seuls outils permettant de faire des
diagonales. Le principe du découpage est de minimiser au maximum le
nombre de carrés à tracer.
Afin de rogner les angles sur les bords des losanges, j'ai simplement
fait des figures qui sortent largement du cadre, puis j'ai appliqué un
huitième cadre avec une bordure blanche et un contenu transparent qui me
sert à masquer tout ce qui sort de la figure et qui ne doit pas être
affiché. Théoriquement il y a une solution plus "propre" (et même
probablement plus économe en taille CSS) : utiliser un overflow:hidden
sur un div qui englobe tous les paragraphes. Personnellement j'ai
rencontré une difficulté sur Mozilla et ne voulant pas y passer trop de
temps j'ai préféré employer un contournement, quitte à prendre quelques
octets de plus.

Les deux seules choses remarquables sont une utilisation minimale des
tags HTML 4 (ne pas mettre les tags implicites comme body html et head
quand ce n'est pas nécessaire) et une mutualisation excessives des
règles CSS avec en particulier l'utilisateur d'une règle *{...} pour
mettre un style par défaut à tous les blocs.

____________________________________________________________________
Xavier

En pièce jointe le fameux Mondrian.
Testé sous IE6, Mozilla 1.7.3, Opéra 7.54, Safari 1.2.

Pas d'originalité pour produire les diagonales : bordure de div.
Il y a une div pour chaque intersection (ça fait 6), plus une div pour mettre au format, et une supplémentaire pour rendre IE6 à la raison. Donc 8 div en tout. Le code équivalent écrit en HTML + CSS est le suivant (613 octets) :

<style>
#z{overflow:hidden;height:490px;width:615px;margin-left:-155px}
div{position:absolute}
#a{border:230px solid;border-color:#f00 #f00 #000 #ffd;top:40px}
#b{border:140px solid;border-color:#ffd #f00 #f00 #ff0;top:-370px;left:-90px}
#c{border:160px solid;border-color:#f00 #00a #ffd #f00;top:140px;left:20px}
#d{border:100px solid;border-color:#00a #00a #dda #ffd}
#e{border:80px solid;border-color:#f00 #ffd #000 #000;top:-100px;left:-260px}
#f{border:120px solid;border-color:#ffd #ffd #f00 #f00;top:-480px}
</style>
<div id="z"><div id="a"><div id="b"><div id="c"><div id="d"><div id="e"><div id="f"><div>


Ensuite pour optimiser la taille du code j'ai utilisé javascript. Mon code javascript reproduit exactement le listing ci-dessus mais en factorisant tout ce qui peut l'être. On passe ainsi de 613 octets à 428 octets.

J'ai laissé la compatibilité à Safari qui me coûte 9 octets dans le CSS mais seulement 2 dans la version javascript.

A noter également un souci avec IE6, qui vaut 5 octets dans le CSS et 4 dans la version javascript.

Au plaisir de te lire pour la publication des résultats.

<script>r='f00';n='000';c='ffd';b='00a';p='position:absolute;';

function f(w,t,r,b,l,y,x){return '<div style="'+p+'border:'+w+

'0px solid;border-color:#'+t+' #'+r+' #'+b+' #'+l+';top:'+y+'0;left:'+x+'0">'}

document.write('<div style="overflow:hidden;'+p+'height:490;width:615;margin-left:-155">'

+f(23,r,r,n,c,4)+f(14,c,r,r,'ff0',-37,-9)+f(16,r,b,c,r,14,2)

+f(10,b,b,'dda',c)+f(8,r,c,n,n,-10,-26)+f(12,c,c,r,r,-48)+f())</script>

Xavier a écrit :

Pas d'originalité pour produire les diagonales : bordure de div.
Il y a une div pour chaque intersection (ça fait 6), plus une div pour mettre au format, et une supplémentaire pour rendre IE6 à la raison. Donc 8 div en tout. Le code équivalent écrit en HTML + CSS est le suivant (613 octets) :

<style>
#z{overflow:hidden;height:490px;width:615px;margin-left:-155px}
div{position:absolute}
#a{border:230px solid;border-color:#f00 #f00 #000 #ffd;top:40px}
#b{border:140px solid;border-color:#ffd #f00 #f00 #ff0;top:-370px;left:-90px}
#c{border:160px solid;border-color:#f00 #00a #ffd #f00;top:140px;left:20px}
#d{border:100px solid;border-color:#00a #00a #dda #ffd}
#e{border:80px solid;border-color:#f00 #ffd #000 #000;top:-100px;left:-260px}
#f{border:120px solid;border-color:#ffd #ffd #f00 #f00;top:-480px}
</style>
<div id="z"><div id="a"><div id="b"><div id="c"><div id="d"><div id="e"><div id="f"><div>


Ensuite pour optimiser la taille du code j'ai utilisé javascript. Mon code javascript reproduit exactement le listing ci-dessus mais en factorisant tout ce qui peut l'être. On passe ainsi de 613 octets à 428 octets.

J'ai laissé la compatibilité à Safari qui me coûte 9 octets dans le CSS mais seulement 2 dans la version javascript.

A noter également un souci avec IE6, qui vaut 5 octets dans le CSS et 4 dans la version javascript.

avec un original fond noir

rik24d a écrit :

Mais l'organisateur de ce concours ne nous donne pas sa version ?