Domů › CSS behavior

CSS behavior

CSS vlastnost behavior (chování) podporovaná pouze prohlížečem Internet Explorer umožňuje implementovat JavaScriptu do webových stránek pomocí kaskádových stylů.

Oproti klasickému zápisu JavaScriptu se do každého (X)HTML prvku nemusí psát ovladač (onclick, onmouseover, onmouseout atd.) jehož hodnotou je skript. Stačí pouze (X)HTML prvku přiřadit styl s vlastností behavior, která obsahuje přímo skript nebo adresu na externí soubor s příponou *.htc (HTml Component). HTC komponenta se nejvíce vyplatí u složitých nebo často se opakujících skriptů.

Příklady použití:

  • CSS3 PIE (Progressive Internet Explorer) umožňuje používat některé CSS3 vlastnosti v prohlížeči IE8-
    • border-radius
    • box-shadow
    • border-image
    • CSS3 Backgrounds (-pie-background)
    • Gradients
    • RGBA Color Values
    • PIE Custom Properties
      • -pie-watch-ancestors
      • PNG alpha transparency and -pie-png-fix
      • Lazy Initialization (-pie-lazy-init)
      • Layout polling (-pie-poll)

Průhlednost PNG formátu v IE6

Do hlavičky webové stránky vložte:

<!--[if (gt IE 5)&(lte IE 6)]>
  <link type="text/css" rel="stylesheet" media="screen, projection" href="ie-6.css" />
<![endif]-->

Obsah souboru ie-6.css:

/* obrazky musi mit nastavene rozmery */
img {
  behavior: expression((this.runtimeStyle.behavior="none") && (this.src.toLowerCase().indexOf('.png')>-1) && (this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='scale')", this.runtimeStyle.paddingTop = this.height, this.runtimeStyle.height = 0));
  overflow:hidden;
}
/* pozadi se nebude dlazdicove opakovat a bude zarovnano vlevo nahoru */
.png {
  behavior: expression((this.runtimeStyle.behavior = "none") && (this.currentStyle.backgroundImage.toString().toLowerCase().indexOf('.png')>-1) && (this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.currentStyle.backgroundImage.toString().replace('url("','').replace('")','') + "', sizingMethod='crop')", this.runtimeStyle.zoom = 1, this.runtimeStyle.backgroundImage = "none"));
}

Odkazy: