Archives par mot-clé : css

Changez votre éditeur Html pour Coda2 et Diet-Coda pour iPad

Publié le par
Répondre

Aujourd’hui 24 mai sort la nouvelle version tant attendue de Coda 2, l’éditeur web que j’utilise et apprécie beaucoup sur Mac. Cette sortie est accompagnée de celle du nouveau petit frère pour iPad : Diet-Coda.

Les deux sont téléchargeables sur :le Coda 2 - Panic, Inc. pour Coda 2 et l’Diet Coda - Panic, Inc. pour Diet-Coda et ils sont tous les deux à 50% de leur prix pour la journée d’aujourd’hui seulement (24/05/2012) !

Coda 2 Diet-Coda

Coda 2 - Panic, Inc.

Diet Coda - Panic, Inc.

Vous trouverez dans le reste de l’article une présentation plus complête de ces deux outils d’ores et déjà présents dans mon arsenal « mobile ».
Continuer la lecture →

Pourquoi ne pas créer vos Css en LESS, jusque dans VisualStudio

Publié le par
Répondre

Pour le projet sur lequel je travaille, je suis amené à utiliser Twitter Bootstrap qui est un bienheureux mélange de css et de javascript vous permettant de rendre votre site plutôt « Touchy » en 3 fois rien de temps. La distribution de Bootstrap dispose de ses fichiers Css mais aussi des fichiers LESS qui ont servi à les générer. Je ne m’en étais pas particilèrement ému jusqu’à ce que Stéphane, mon collègue, m’incite à y regarder de plus près pour éviter de m’enm……comme je le faisais. Je me suis donc penché sur LESS qui permet de passer de règles aussi lisibles que :

@color: #4D926F;
@white: #FFF;

#header {
  color: @color;
  h1
  {
  	background-color: @color;
  	color: @white;
  	span
  	{
  		display: none;
  	}
  }
}
h2 {
  color: @color;
}

en :

#header {
  color: #4d926f;
}
#header h1 {
  background-color: #4d926f;
  color: #ffffff;
}
#header h1 span {
  display: none;
}
h2 {
  color: #4d926f;
}

… ce qui pour l’exemple, ne parait pas plus simple forcément, mais, la différence se sera sur un site entier. D’autant que je n’ai pas mis en oeuvre la minification pour préserver la lecture.

Vous en saurez plus en lisant la suite de l’article et comprendrez tout l’intérêt de passer vos développement Css en LESS…

Continuer la lecture →

Introduction to CSS3 par Design Shack, série terminée

Publié le par
Répondre

Design Shack clos par ce 6eme tutorial sa série de présentation de CSS3.

Voici un lien vers chaque page :

Bonne lecture

CSSVista et autres ressources Css

Publié le par
Répondre

Parmi les liens trouvés ce matin (et listés à la fin), concernant particulièrement les Css, je suis tombé sur CssVista !

CssVista de Litmus Labs. est un petit éditeur de Css. Sa particularité est qu’il charge les Css à partir d’une Url et vous permet d’y faire des modifications. L’autre bon coté, c’est que les modifications sont prises en temps réel et visible, en split-écran, en même temps sur IE et Firefox. Je l’ai trouvé en lisant Deziner Folio. Il est disponible ici.
De quoi se simplifier la vie… énormément !

Dans le reste de ma lecture, vous trouverez 23 ressources pour des Css Clean, lu sur http://vandelaydesign.com/. C’est une collection de liens vers des ressources et des outils comme les optimiseurs de css, les validateurs, etc.

Hover Css et navigateurs

Publié le par
Répondre

Ouf, il n’y a pas eu de mise à jour via WSUS cette nuit, ce qui fait que j’ai pû retrouver mon navigateur ouvert ce matin avec tous les jolis liens dont je n’ai pas eu le temps de parler hier.
Bref !
Hier donc, je me suis piqué de curiosité pour la nouvelle (et wahouuuu, très belle ) page d’accueil du site institutionnel du Cnrs. Je le précise pour ceux qui ne le savent pas… le Cnrs n’est pas en deuil. Bref, on pourra dire ce que l’on veut sur la magnifique couleur de fond, le style épuré, l’identification rapide d’où il faut cliquer pour aller où on veut; mais il y a quand même quelque chose de très bien : c’est la construction de la page elle-même.
Après m’être étranglé en formation « accessibilité des sites web », j’ai voulu savoir s’ils avait affublé cette page d’un magnifique javascript de navigation comme ils l’ont fait pour beaucoup d’autres sites (un exemple proche). Pas de javascript et une page plutôt propre, qui valide plutôt bien.
Ben mince alors! Une nav par menu, du « hover » pour la suite. Zou, direction la Css et là : re-Wahou ! Bien écrit, bien commenté, des tailles « em » pour le texte. Et ca :

body {
behavior:url("https://www.cnrs.fr/fr/z-tools/styles/csshover.htc");}

Bref, Bravo !

Donc, vous voulez des pages bien écrites, avec de menus déroulants et quel que soit (à peu près) le navigateur. Ceci sans pour autant trop concéder à l’accessibilité : Xhtml, Css et fichier de comportement javascript.
Celui utilisé sur le site est disponible là : http://www.xs4all.nl/~peterned/csshover.html.
La dernière version est actuellement la V2.02.060206.

Vous trouverez sur le blog de Cyril Durand (Hop, dans feedreader) un article qui propose une petite amélioration liée à son utilisation avec Ajax.Net