Blackotine

Coins arrondis en css et javascript

Récemment, j’ai du découper un design comportant de nombreux coins arrondis, de tout styles, avec ou sans bordures, couleur de fond etc…

J’ai donc cherché un script simple à mettre en place et très modulable et comme je n’ai pas trouvé quelque chose qui correspondait exactement à mes besoins, j’ai décidé de créer mon propre script.

Avant tout, je suis contient que le fait de devoir créer des éléments supplémentaires juste pour satisfaire un besoin de mise en page est une technique à proscrire car cela n’a aucun sens. Tout devrait pouvoir se faire directement dans le CSS. Oui mais voilà, le CSS 3 et sa gestion native des bords arrondis (-moz-border-radius et -webkit-border-radius pour Firefox et Safari) est loin d’être implanté sur tous les navigateurs et nous sommes, malheureusement, dans l’obligation de ruser.

Ce que je voulais :

• Les balises ne servant qu’à la mise en page et n’ayant aucune portée sémantique sont générées en javascript.
• Un javascript non obstrusif, une mise en page non dégadée si le javascipt n’est pas activé / installé. Dans ce cas là, les coins restent simplement droits.
• Utilisation des images pour les coins pour un meilleur rendu et une plus grande modularité.
• Un script léger, syntaxe de l’appel simple mais paramétrable.
• Entièrement personnalisable via CSS.
• Conserve le DOM et génère du XHTML et du CSS valide.
• Rapide !

Pour commencer, voici une démo du script en action et une deuxième avec un bouton pour lancer le script.

Le script s’appuie sur le framework Javascript Mootools. Lire la suite »

Compression, cache et optimisation des fichiers javascript et css

Comment optimiser l’utilisation de JavaScript en termes de compression, cache, vitesse de chargement sans pour autant se retrouver avec des fichiers illisibles car, sans indentation, sans espaces voire obfusqués. (plusieurs méthodes existent)

Garder un fichier lisible est, selon moi, indispensable pour maintenir son application à jour, la modifier, la corriger et cela d’autant plus lorsqu’on travaille en équipe.

Une des solutions est de garder une version non compressée mais cela sous-entend de jongler sans cesse entre plusieurs versions, ce qui n’est définitivement pas pratique.

Combine

La solution qui me semble la plus intéressante est la classe PHP Combine, simple à utiliser, fiable, gérant la combinaison, la compression, la mise en cache et les dates d’expiration.
Lire la suite »

Quel ordre pour les valeurs de la propriété background ?

La propriété background

La propriété raccourcie background est très utile. Elle permet de définir en une ligne toutes les propriétés d’arrière-plan d’un élément (background-color, background-image, background-repeat, background-attachment, et background-position)

Un peu d’ordre !

Est-ce que l’ordre dans lequel on place les valeurs de cette propriété a une importance ?
Normalement non. Mais, des navigateurs obsolètes ou pointilleux, peuvent mal interpréter ces valeurs si elles ne respectent pas l’ordre indiqué par le W3C, soit :

background:color image repeat attachment position;

Lire la suite »

IE6, la bête noire des intégrateurs

Au moment où j’écris ces lignes, Microsoft Internet Explorer 6.0 est utilisé par 22.05 % des utilisateurs (source : libstat.com – juin 2008). Ce pourcentage est en constance baisse mais reste malheureusement bien trop élevé pour qu’on ne puisse tenir de ce navigateur.

Le problème est de taille, le nombre d’incompatibilité et de fonctions non supportées rendent le travail de l’intégrateur long et fastidieux. Il faut sans cesse tout au long de la découpe prévoir et vérifier le bon rendu de la mise en page.

Voici donc quelques astuces et outil qui permettent de faciliter le travail de l’intégrateur, en attendant (très longtemps) que les versions obsolètes disparaissent : Lire la suite »

Modifier la taille du texte avec CSS, Javascript et les cookies

Préambule

Un bouton permettant de modifier la taille du texte d’une page semble à première vue sans intérêt car il s’agit d’une fonctionnalité classique de tous les navigateurs

De plus, comment une personne ayant un handicap visuel, et qui pourrait donc trouver ce bouton utile, peut elle localiser facilement celui-ci ? Sans compter, que ces personnes naviguent tout le temps avec un affichage adapté à leur handicap et qu’il n’attendent pas que les sites proposent de tels gadgets mais que , par exemple, toutes les tailles de polices soient exprimées de façon relative, en « em ».
Lire la suite »