Business Geek

Aller au contenu | Aller au menu | Aller à la recherche

Tag - CSS

Fil des billets - Fil des commentaires

jeudi 28 juin 2007

Ajouter une CSS dans une page avec une MasterPage

Par Djeepy1 le jeudi 28 juin 2007, 22:17 - ASP.NET

Quand on utilise les MasterPages, il devient impossible d'ajouter un lien vers une feuille de style directement dans une page. En effet, on ne peut mettre la référence à la CSS que dans la section <head/> et les <asp:Content> des pages enfants doivent se trouver obligatoirement dans le <body/> (la <form/> plus exactement).

On a tout de même accès à la section <head/> depuis le code pour ajouter manuellement un lien vers une CSS avec un contrôle de type HtmlLink.

HtmlLink cssLink = new HtmlLink();
cssLink.Href = "../mapage.css";
cssLink.Attributes.Add("rel", "stylesheet");
cssLink.Attributes.Add("type", "text/css");
Page.Header.Controls.Add(cssLink);

Afin de rendre cette utilisation plus souple, on peut encapsuler ce code dans un contrôle afin de l'ajouter graphiquement dans le designer de page :

public class StyleSheetLink : Control
{
  private string _href;
  [UrlProperty]
  public string Href
  {
    get { return _href; }
    set { _href = value; }
  }
  protected override void OnPreRender(EventArgs e)
  {
    HtmlLink cssLink = new HtmlLink();
    cssLink.Href = _href;
    cssLink.Attributes.Add("rel", "stylesheet");
    cssLink.Attributes.Add("type", "text/css");
    Page.Header.Controls.Add(cssLink);
  }

Ainsi, il suffit d'ajouter dans une page le tag suivant :

<Bewise:StyleSheetLink ID="css" runat="server" Href="~/_css/default.css" />

Pour améliorer ce contrôle, on pourrait ajouter une vérification dans la liste des contrôles du header pour savoir si la CSS n'est pas déjà référencée.

aucun commentaire

mardi 12 juin 2007

Afficher un PNG avec un channel alpha sur IE6

Par Djeepy1 le mardi 12 juin 2007, 13:10 - ASP.NET

La problématique

Elle est très simple, IE6 ne gère pas le channel alpha sur une image au format PNG. Je ne parle pas de simple transparence (ça c'est géré) mais d'une transparence en dégradé. (définition wikipedia)

La base de travail

Nous allons faire fonctionner le channel alpha pour une image classique et pour image en background. Le code HTML est le suivant :

<img src="images/logoalpha.png" />

<h1><span>Les passionnés du malt</span></h1>

Le code CSS est le suivant :

#headings h1 {
  height:241px;
  width:512px;
  background: url( '../images/logoalpha.png' ) no-repeat;
}
#headings h1 span {
  display: none;
}

La solution

Internet Explorer dispose d'un système de filtres pour effectuer des opérations de rendu sur des éléments de l'arbre DOM. Notamment, il existe un filtre appelé AlphaImageLoader qui permet de gérer le channel alpha. Pour appliquer un filtre, il suffit d'insérer une directive CSS filter. Pour l'image background, c'est assez simple, on applique directement la directive à la place de background :

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/logoalpha.png', sizingMethod='scale');

Cependant, pour rester compatible avec IE7 et Firefox, on doit mettre la directive dans un hack pour IE et on garde un background classique pour les autres navigateurs. Le hack qui est interprété uniquement par IE (inférieur à la version 7) est "* html" :

* html #headings h1 {
  /* on annule le background et on le red‚finit avec le filtre */
  background:none;
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/logoalpha.png', sizingMethod='scale');
}

Pour l'image classique, on ne peut appliquer directement la directive filter en CSS. On doit recourir à du Javascript pour appliquer le filtre. Il existe un moyen d'appliquer un script sur un élément avec IE6, c'est l'utilisation des behaviours. Un behaviour est un bout de Javascript encapsulé dans un fichier .HTC formaté d'une certaine façon :

<public:component>
  <public:attach event="onpropertychange" onevent="propertyChanged()" />
  <script>
[MON SCRIPT ICI]
  /script>
</public:component>

On voit ici que le script sera exécuté au changement d'une propriété du tag sur lequel il est appliqué. Je ne vais pas décrire le script ici et je vous propose plutôt de le télécharger ici. Retenez juste qu'il a besoin d'un gif transparent pour appliquer le filtre (je n'ai pas cherché à comprendre ;-).

Mais alors, comment appliqué le behaviour ? En CSS, il suffit d'ajouter :

.alphaPNG {
  /* compris uniquement par IE --> javascript executé sur l'élément */
  behavior:url('png.htc');
}

Vous aurez compris que j'ai juste à appliquer la classe CSS sur mon image PNG :

<img src="logoalpha.png" width="512" height="241" class="alphaPNG" />

Vous noterez que je fixe la taille sinon, le rendu ne se fait pas.

Pour voir ce que cela donne, rendez-vous sur cette page : http://blog.djeepy1.net/public/labs/png-fix/SampleLogo.htm
Pour télécharger tout le projet :  http://blog.djeepy1.net/public/labs/png-fix/sample.zip

Merci à Mitch pour le logo.

 

aucun commentaire

mercredi 30 mai 2007

Afficher un titre sous la forme d'une image en CSS

Par Djeepy1 le mercredi 30 mai 2007, 10:11 - ASP.NET

Tout développeur de site web a été confronté à cette problématique et la réponse technique que l'on rencontre dans 99% des cas est de mettre un tag <img />. Cela répond certes à la problématique mais ce n'est en aucun cas bulletproof[1] et ne respecte pas les rudiments du web design.

En effet, les moteurs de recherche ne considèreront pas comme pertinente l'information, les outils d'accessibilité risquent d'être perdus et votre code HTML peut devenir vite inmaintenable avec cette forme de conception. Comment faire pour palier à ces problématiques ? Un webdesigner vous répondra : CSS biensur ! Et je ferai la même réponse.

Repartons du début :

  1. Toujours commencer par trouver la sémantique correcte. Pour un titre, on met un tag <h1/> (ou h2, etc.)
  2. on met le titre de façon TEXTUELLE pour être compris par les outils donc <h1 id="maintitle">ici mon super titre</h1>
  3. l'image est décorative donc on la met dans le style. Dans votre CSS, vous aurez
    #maintitle { background:url(title.gif) ; }
  4. à ce stade, tout semble correct sauf que le texte apparait au dessus de l'image, il faut donc le faire disparaître. Il existe 2 solutions.
  5. 1ère solution (la plus élégante) : mettre un tag dit technique pour faire disparaître le texte. Le HTML devient <h1 id="maintitle"><span>ici mon super titre<span></h1>.
    Ensuite, il suffit de faire disparaître le <span> en CSS : #maintitle span {visibility:hidden[2] ;}
    Attention : vous aurez certainement des problèmes de padding à régler.
  6. 2ème solution (à proscrire mais bon) : on a pas besoin du span et on décale le texte pour le faire sortir de la fenêtre #maintitle { text-indent:99999px; } 

[1]: j'adore ce terme et vous le trouverez souvent dans mes propos (au même titre que le très fameux : "ça poutre")
[2]: on peut utiliser un display:none mais la taille du rendu du h1 devient minuscule (voire invisible); visibility:hidden permet de garde la taille que le texte aurait pris

aucun commentaire