HTML Styles, générateur de feuilles de style CSS 3

Nouvelle version 4.05 - juillet 2015 !

Que fait HTML Styles ?

  1. Produire des feuilles de style avec l'interface graphique d'une « boïte de texte CSS » restituant visuellement l'aspect du style paramétré.
  2. Import de feuilles de style existantes pour les modifier.
  3. Coder du HTML 5 :
    • Rédiger les « meta » d'une page en les optimisant pour le référencement <title>, description, keywords, etc.
    • Préparer un SiteMap Google pour le référencement, le fichier robots.txt et un plan de site.
    • Générer du code HTML : associé à un simple éditeur de texte et avec de bonnes connaissances du langage HTML, HTML Styles est un environnement de développement web complet. Tout ce site internet a été réalisé avec ces outils.
    • Créer les balises images d'un lot complet d'images.
    • Construire une imageMap.
  4. Produire des planches photographiques.

HTML Styles fonctionne dans les environnements Mac, OS X et Windows et Linux (versions supportant un jeu de répertoires courant xdg-user-dirs comme Ubuntu et Fedora).

CSS est un langage de mise en page

CSS décrit la mise en page des documents indépendamment de leur contenu : cette approche allège le contenu des pages, assure une plus grande homogénéité graphique et simplifie la maintenance des sites internet. Plus de détails sur les feuilles de styles CSS.

La boîte de texte CSS représente un bloc de texte

margin
 
border
padding
zone d'affichage du texte

La boîte de texte sert d'interface graphique pour spécifier les styles

Bien sûr, on peut toujours écrire une feuille CSS à la main… Mais c'est un peu laborieux et HTML Styles évite les fautes de syntaxe qui font qu'un style ne fonctionne pas.

Les spécifications CSS3

CSS est, à mon avis, un langage spécifié de manière inutilement complexe : ceci aboutit à une implémentation hétérogène dans les différents navigateurs qui ont tous une manière de faire qui, hélas, leur est propre… Mais le support des nouvelles propriétés se généralise progressivement.

Quand à Internet Explorer, grand compatible avec Soi-Seul, il est à la traîne même si la version 10 se rapproche du standard.
Si vous désirez le support des nouvelles propriétés par Internet Explorer, allez voir le site CSS3 PIE (Progressive Internet Explorer) : il fournit un script assurant la compatibilité.

J'ai choisi d'implémenter le support des propriétés CSS 3 les plus utiles en tenant compte des différentes variantes nécessaires, comme border-image, border-radius, background-clip, background-origin, background-size, etc.

Historique des versions

1 juillet 20154.05 HTML Styles :
  • ajout de la propriété CSS3 box-sizing.
  • regroupement des préférences en 2 onglets sur la même carte.
Photosheet 2.7 : correction de bugs (formats de légendes, rotation des images).
Éditeur de metas : correction d'un bug sous Linux (format dates).
3 décembre 20144.04 Mis une icone « plugin » affichant la version sur tous les plugins.
Photosheet 2.6 : La gestion des données IPTC repose désormais uniquement sur ExifTools. En absence de ce dernier, il reste possible de créer des planches, non légendées.
Ajout d'une fonction « série » permettant de créer des dates espacées en séquence pour une ensemble d'images lorsque l'appareil photo n'a pas créé les données correctement. Support des légendes et dates pour les films. Fonction d'export des données IPTC vers un tableur pour des modifications « massives » par lots. Ajout de rétro-liens entre index et planches HTML pour optimiser la navigation. Correction d'un bug sur les légendes d'image multi-lignes.
28 juin 20144.03 Correction d'un bug à l'import de css avec la propriété background.
plugin Photosheet 2.6 : Optimisation de la gestion des données IPTC, rotation des images originales, ajout .m4v aux formats de films, customisation des légendes de vignettes.
14 juillet 20134.02Meilleur décodage des fichiers importés (feuilles css et documents à convertir).
Suppression de l'encodage de caractère spéciaux dans le HTML généré lorsque le charset de la page est UTF-8.
plugin SiteMap 2.5 : correction bug sur plan de site et ajout transfert FTP des plans de site
correction bugs : affichage gifs animés, génération des tables, réglages spécifiques à lot d'images.
21 avril 20134.01Ajout des propriétés counter-reset, counter-increment, content et des propriétés raccourcies list-style, columns et column-rule.
Possibilité d'ajouter une opacité alpha après une valeur hexa lors de la saisie d'une couleur.
21 mars 20134.00Support du HTML 5 et nouvelles propriétés CSS3
  • Dans les dialogues, les propriétés CSS sont affichées avec leur nom.
  • Ajout des propriétés CSS3 background-clip, background-origin, background-size et border-image.
  • Prise en compte du nom standard pour les propriétés border-radius, box-shadow et text-shadow supportées par tous les navigateurs récents. Modification de vertical-align pour accepter longueur et pourcentage.
  • Ajout d'un éditeur de table et d'un sélecteur d'image permettant de placer des styles plutôt que des instructions HTML obsolètes.
plugin Metamaker 2.5 :
  • ajout du doctype HTML5 et gestion de Metas compatibles html4 et html5;
  • fabrication de fichiers modèles de pages compatibles RTF2HTML.
plugin Sitemap 2.4
  • prise en compte des Metas HTML5 et filtrage des pages en "noindex ou none";
  • dialogue de saisie l'url, du dossier local et de l'adresse FTP
plugin ImageMap 1.6: amélioration de l'interface de saisie des areas.
plugin ImageBatch 2.4: gestion des styles d'images (en remplacement des instructions HTML) et mémorisation des options dans le dossier d'images.
4 novembre 20123.40Amélioration du plugin Photosheet avec le support en lecture et mise à jour des légendes IPTC; plus grande compatibilité avec des logiciels comme iPhoto ou Picasa, les légendes (ainsi que l'auteur et les mots-clés) sont sauvegardés au sein des images sans altérer la date du fichier. Nécessite d'installer exifTool de Phil Harvey.
10 septembre 20123.39Correction d'une anomalie du menu plugins avec la touche commande et amélioration des plans de site.
27 août 20123.38Améliorations de la version 3.37. Suppression des JavaScripts dans l'import de styles. Photosheet 2.33 : nouvelle version corrigeant l'affichage des dates des images et possibilité de tri des vignettes par date.
7 juin 20123.37Améliorations de la version 3.36.
4 avril 20123.35Améliorations du plugin PhotoSheet.
9 janvier 20123.34Améliorations techniques : simplification du paramétrage et suppression du support des couleurs NetScape.
18 novembre 20113.33Support des principaux charsets.
Propriétés du « column manager » : column-count, column-width, column-gap, column-rule-color, column-rule-style, column-rule-width, column-span.
Fonction d'attachement de page à une CSS pour tester de manière interactive.
15 août 20113.32Remaniement du dialogue « texte » et correction de bugs mineurs.
21 juin 20113.31Nouvelle version du plugin « Sitemap » permettant d'uploader directement le fichier Sitemap et le fichier robots.txt à la racine du site.
16 mai 20113.30Nouveau plugin « webkit-transforms.rev » permettant de saisir les transformations.
Version 2.0 du plugin Photosheet : prise en compte des photos et des vidéos.
10 février 20113.29Propriété box-shadow; choix des coins arrondis sur border-radius; optimisation des scripts. Gestion des plans de site et de plans partiels dans le plugin Sitemap. Nouveau plugin convertisseur/éditeur de pages HTML « RTF2HTML.rev ».
Amélioration du plugin Photosheet : prise en compte de l'orientation des images (données EXIF) pour créer les vignettes.
24 septembre 20103.28Version de transition portée à l'environnement Linux (testée sous Fedora et Ubuntu, Debian ne marche pas...) au moyen de la librairie XPlatform.
5 juillet 20103.27Nouveau bouton Pagination gérant les propriétés de mise en page et de sauts de page.
22 mai 20103.26Améliorations techniques de la pile et des plugins. Nouvelle version de la carte background.
19 août 20093.22ajout cursor sous la forme de l'url d'une image spécifique.
Nouvelle version du plugin Sitemap permettant de générer un plan de site et le fichier robots.txt.
Photosheet 1.5, plugin de création d'une planche contact.
24 mai 20093.21Propriété « text-shadow ».
Nouvelle version de l'éditeur de metas, optimisée pour le référencement des pages.
Nouveaux plugins imageBatch.rev (création de balises <img> pour un lot d'images) et imageMap.rev (saisie d'une image map).
2 février 20093.19Optimisations techniques diverses. Possibilité de vérifier le dernier niveau de version disponible.
2 juillet 20083.14Ajout de l'outil « crayon » permettant d'entrer manuellement les propriétés css spécifiques et d'ajouter des commentaires aux feuilles de style. Arrondi de bordure border-radius.
21 mai 20083.13Gestion des couleurs RGB et RGBA, support des propriétés Opacity et clip.
14 mars 20083.11revue de l'interface graphique, propriété raccourcie « background ».
11 octobre 20073.06Premiers plugins externes éditeur de META et SiteMap.
23 août 20073.04Première version pour Revolution, compatible toutes plateformes.
Amélioration de l'interface et ajout de nouvelles propriétés CSS.
16 septembre 20062.72Dernière version pour HyperCard.
janvier 20031.02Première version réalisée avec HyperCard.

accueil et historique versions - installer HTML Styles - préférences / options - la boîte de texte - menu Fichier - couleurs CSS et sélecteurs - background - police et texte - margin et padding - borders styles et arrondis - position, block, display... - listes - outil crayon - mise en page et sauts de page - outils HTML intégrés - plugin éditeur de Métas - plugin Site Map - plugin Photosheet - plugin Lots d'images - plugin Image Map - convertisseur/mini-éditeur HTML - plugin CSS-transforms - feuilles CSS, un peu de théorie - Un exemple simple -