Darklg Blog » css

Débug rapide d’Internet Explorer 7 sur Mac

Darklg — Sun, 30 Oct 2011 09:21:30 +0000

Plus une astuce qu’un véritable article, mais je viens de tester l’application WineBottler, qui permet, à l’aide de Wine, d’installer une version d’Internet Explorer 7 sur Mac. ~~Certains vont me dire : MER IL ET FOU.~~*

J’ai donc suivi un tutoriel d’installation, pour arriver à un fichier Microsoft Internet Explorer 7.app dans mon dossier d’Applications.

Le résultat est à la hauteur de mes attentes. L’interface est buguée, le JS semble difficilement géré, les polices laissées au soin du navigateur ( font-family:serif; et autres sans-serif ) sont hasardeuses, et il semble ignorer les conditions HTML & body multiples.

Malgré ça, il se lance en une poignée de secondes, est donc bien plus rapide qu’une machine virtuelle, et vous permettra de lancer ponctuellement Internet Explorer sur votre Mac en début de projet, plutôt que de devoir faire des « pauses machine virtuelle » pour vérifier les bugs éventuels de vos intégrations.

Une arme à double tranchant, mais tout de même une astuce à partager ; )

* Grosse référence

Un article publié sur Darklg Blog © 2012
Lien vers l'article original : Débug rapide d’Internet Explorer 7 sur Mac
Partager cet article sur Twitter

Réorganisez vos propriétés CSS avec CSSLisible

Darklg — Wed, 31 Aug 2011 21:12:53 +0000

Je vous en ai parlé il y a peu, CSS Avancées est un livre fantastique. Dans les premiers chapitres (pages 53.54), l’auteur évoque une règle d’organisation des propriétés CSS dans un sélecteur qui m’a beaucoup marqué:

Contenu créé : ( content, etc )
Propriété display
Positionnement ( z-index, position, top )
Modèle de boîte ( height, margin, border … )
Transformations et transitions
Typographie
Décoration

L’ordre recommandé par l’auteur peut être adapté à ses goûts / à la méthode de son entreprise, mais l’essentiel reste là : regrouper les propriétés par type, afin de mieux relire son code, trouver directement un bug, et tous les avantages d’une convention de codage.

Ainsi, dans la lignée des petits scripts qui font mouche, comme img2datauri, voici CSSLisible, un simple script en PHP pour réorganiser vos CSS, disponible sur GitHub.

Le principe est simple, on télécharge, on fork ou on clone le code dans son dossier www ou htdocs de MAMP/LAMP/WAMP, et on y accède depuis son navigateur.

L’interface sobre, et sans CSS, ô ironie, vous permet de coller un bout de code à nettoyer, pour obtenir en retour un code réorganisé, et trié dans l’ordre de priorité des priorités. Il s’agit d’une base de travail à faire évoluer, l’algorithme de tri étant très primaire.

Testez directement CSSLisible

Je suis évidemment ouvert à tous retours

Un article publié sur Darklg Blog © 2012
Lien vers l'article original : Réorganisez vos propriétés CSS avec CSSLisible
Partager cet article sur Twitter

Une image en CSS background-image avec data:uri : img2datauri

Darklg — Thu, 04 Aug 2011 10:31:36 +0000

Vous avez toujours rêvé de pouvoir convertir une image en data-uri, avec sortie direct du code CSS approprié ? C’est possible avec img2datauri, script disponible sur Github, réalisé par votre serviteur au sein de la société Colorz.

Vous ne connaissez pas encore le principe du data:uri ? Direction Wikipedia

Oui, ça existe déjà, mais c’est pour l’exercice de style.

Un article publié sur Darklg Blog © 2012
Lien vers l'article original : Une image en CSS background-image avec data:uri : img2datauri
Partager cet article sur Twitter

Snippet : Internet Explorer en Body CSS Class

Darklg — Mon, 01 Aug 2011 09:51:43 +0000

Une technique assez connue, quand vos sites n’ont pas besoin d’une feuille de style, est de mettre une classe à HTML ou BODY pour indiquer la version d’IE, grâce aux commentaires conditionnels.
Exemple dans HTML Boilerplate :




 <html class="no-js" lang="en">

Je vous propose ma version (dans body, mais vous avez le choix), permettant de cibler plus finement les versions :

 
 
 
 
 
 <body class="maclass">

Du coup, les débugs IE sont bien plus propres :

.monbloc{display:inline-block}
.lt_ie8 .monbloc{display:inline;zoom:1}

Un article publié sur Darklg Blog © 2012
Lien vers l'article original : Snippet : Internet Explorer en Body CSS Class
Partager cet article sur Twitter

Micro CSS Grid Framework

Darklg — Thu, 09 Jun 2011 07:00:36 +0000

Dans la lignée du 1kb CSS Grid Framework, j’ai décidé de monter un micro Framework de Grid afin de gérer des blocs flottants, de largeur fixe ou relative.

N’ayant pas besoin de la compatibilité IE6 dans la plupart des cas, j’ai pu utiliser les sélecteurs CSS 2.1 pour économiser quelques noms de classes. Le seul impératif étant d’appliquer la classe de colonne en premier.

Dans l’exemple ci-dessous, je fais deux blocs de largeur égale, via une classe « 50p » pour « 50% », mais il est également possible de la nommer convenablement (comme « col_sidebar » .. sémantique, quand tu nous tiens), tant qu’elle est préfixée par « col_ ».

Code HTML

<div class="grid">
    <div class="col_50p">a</div>
    <div class="col_50p">b</div>
</div>

Code CSS

.grid{overflow:hidden}
.grid *[class^="col_"]{float:left;overflow:hidden}
.col_50p{width:50%}
 
/*Exemples de classes de colonnes*/
.col_contenu{width:600px}
.col_sidebar{width:300px}

Avec quelques aménagements dans le HTML et le CSS, on peut mettre en place des gouttières :

<div class="grid_1p">
    <div class="col_49p">a</div>
    <div class="col_49p">b</div>
</div>

*[class^="grid_"]{overflow:hidden}
*[class^="grid_"] *[class^="col_"]{float:left;overflow:hidden}
.grid_1p *[class^="col_"] + *[class^="col_"]{margin-left:1%}
.col_49p{width:49%}

C’est évidemment incompatible avec IE, sauf aide de Selectivizr et d’un éventuel bloc en clear:both à la suite. Comme pour la plupart des systèmes de Grilles, il vaut mieux éviter de styliser directement le bloc, et de privilégier le style sur un enfant.

à utiliser judicieusement, étant donné le peu de sémantique des blocs DIV, et le fait que, soyons francs, ce système ressemble affreusement à l’utilisation des TABLE, comme au « bon vieux temps ». Le terme framework est ici largement à prendre au second degré (:

Un retour, une question, une insulte ? Direction les commentaires

Un article publié sur Darklg Blog © 2012
Lien vers l'article original : Micro CSS Grid Framework
Partager cet article sur Twitter

Responsive Web Design – Ethan Marcotte

Darklg — Tue, 07 Jun 2011 14:53:27 +0000

Le nouveau livre-bijou des éditions A Book Apart vient de paraître: Il s’agit de Responsive Web Design par Ethan Marcotte.

Après HTML5 pour les Web Designers, CSS3 for Web Designers et The Elements of Content Strategy, ce quatrième volume se penche sur les questions autour de la conception d’un site réagissant différement selon le navigateur et l’appareil utilisé.

Je ne vous cache pas que j’ai acheté le livre à l’aveugle, étant donné le bas prix, la compétence de l’auteur (vous avez certainement déjà lu cet article sur le Responsive Web Design), et le manque de ressources claires sur cette facette des CSS3.

La présentation officielle du livre :

From mobile browsers to netbooks and tablets, users are visiting your sites from an increasing array of devices and browsers. Are your designs ready? Learn how to think beyond the desktop and craft beautiful designs that anticipate and respond to your users’ needs. Ethan Marcotte will explore CSS techniques and design principles, including fluid grids, flexible images, and media queries, demonstrating how you can deliver a quality experience to your users no matter how large (or small) their display.

Le livre est disponible sur le site des éditions A Book Apart, en papier ou formats électroniques ( mobi, epub, pdf … sans DRM ) et probablement très bientôt chez votre libraire électronique ou papier préféré !

Edit : Disponible sur Amazon !

Un article publié sur Darklg Blog © 2012
Lien vers l'article original : Responsive Web Design – Ethan Marcotte
Partager cet article sur Twitter

Snippet : Dégradés / Gradients en CSS3

Darklg — Thu, 26 May 2011 17:00:54 +0000

Ce bout de code permet de faire un dégradé en fond dans un bloc.
On notera que :

La couleur de fond en fallback est définie en premier
Le dégradé commence en haut par #fff, et finit en bas par #000
Il existe une alternative via un filter pour MSIE

#mondiv {
    background-color: #fff;
    background-image: -moz-linear-gradient(top, #fff, #000); 
    background-image: -o-linear-gradient(top, #fff, #000); 
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #fff),color-stop(1, #000)); 
    background-image: -webkit-linear-gradient(#fff, #000); 
    background-image: linear-gradient(#fff, #000);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#000000'); 
}

Note : Attention, le filter gère hyper mal le Color Shorthand ( #fff au lieu de #ffffff ) ( Merci Guirec ! )

Un exemple ci-dessous, qui n’apparaîtra peut-être pas dans votre lecteur RSS :

Un article publié sur Darklg Blog © 2012
Lien vers l'article original : Snippet : Dégradés / Gradients en CSS3
Partager cet article sur Twitter

Snippet : Transitions CSS3

Darklg — Wed, 25 May 2011 19:48:05 +0000

Voici un bout de code permettant d’effectuer une transition ( CSS3 ) fluide entre les états d’un élément ciblé : hover, active, focus …

a {
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
}

Un snippet à garder sous le coude

Edit : pour des raisons de performances, et de compatibilité éventuelles avec des sprites, choisissez uniquement la propriété qui bénéficiera de la transition ( color, opacity, … )

Un article publié sur Darklg Blog © 2012
Lien vers l'article original : Snippet : Transitions CSS3
Partager cet article sur Twitter

Super Mario – Javascript et CSS

Darklg — Fri, 03 Dec 2010 09:03:40 +0000

En une soirée d’hiver, ou presque, j’ai monté une petite animation, extraite de Super Mario, uniquement en Javascript, CSS (Et quelques sprites). Pour « jouer », c’est très simple, pressez la touche droite ( ou gauche ) de votre clavier.

Attention, c’est très simple, pas factorisé, plutôt une preuve de concept, et principalement de l’autosatisfaction

Découvrez Super Mario – Javascript et CSS.

Un article publié sur Darklg Blog © 2012
Lien vers l'article original : Super Mario – Javascript et CSS
Partager cet article sur Twitter

CSS3 pour les Web Designers

Darklg — Mon, 29 Nov 2010 11:00:27 +0000

Après l’excellent HTML5 for Web Designers, A Book Apart récidive en éditant CSS3 for Web Designers, un livre de Dan Cederholm sur les nouveautés du CSS3.

Articulé autour d’un site exemple plein d’humour, l’auteur nous fait découvrir certaines des nouvelles proprietes et techniques autour du CSS3, et nous invite à un enrichissement de l’expérience utilisateur, grâce à des explications claires et précises.

On a le plaisir d’y découvrir une explication sur les mérites et bien-fondés des préfixes constructeurs, tels que -moz, -webkit, -o, ainsi qu’une explication des propriétés transform:, des transitions CSS, ou des background multiples.

L’auteur répond également à deux des questions les plus posées :
- Peut-on utiliser CSS3 aujourd’hui ?
- Est-il important que votre site soit identique selon les navigateurs ?

Comme pour leur derniere publication, A Book Apart propose ce livre en papier, et en ebook ( aux formats .mobi, .epub, .pdf ). Pour les amoureux de la langue de Molière, le livre est egalement disponible en precommande en Francais chez Amazon.

Un article publié sur Darklg Blog © 2012
Lien vers l'article original : CSS3 pour les Web Designers
Partager cet article sur Twitter