Font písma

Font Squirrel umožňuje aplikovat zvolený font písma nezávisle na fontech uživatelského operačního systému. Toto řešení neobaluje HTML zdroj, ale využívá kombinace javascriptu a CSS, font je možné i tisknout, má menší datovou náročnost než Cufón a navíc se jedná o modernější technologii.

1. Stáhnout si požadovaný TTF font písma:
   • České fonty
   • Font Squirrel
   • Google Fonts
   • Typekit.com
   • KERNEST
   • Fonts4Free
   • Fontdeck (jen placené)
   • Fonts.com (jen placené nebo s reklamou)
2. Pomocí @font-face Generátoru si vygenerovat požadované nastavení (pro české fonty zvolit volbu Expert):
   • Custom Subsetting
     • Language: Czech
     • Unicode Tables: Basic Latin
3. Rozbalit webfontkit archiv, rozbalený adresář přejmenovat např. na fonts a umístit do svého tématu vzhledu.
4. V html zdroji připojit CSS fonts/stylesheet.css (v Drupalu nejlépe pomocí .info souboru).
5. Název fontu obsažený v souboru stylesheet.css je možné použít v libovolném CSS jako vlastnot font-family.

Podobným způsobem je možné použít i Cufón, který ovšem obaluje HTML kód, není možné jej tisknout a má vyšší datovou náročnost než Font Squirrel.

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:

• PNG transparency in IE 6 with no extra HTTP reques
• IE PNG Fix.

Sjednocení vzhledu formulářových prvků

Bližší informace viz Formalize CSS.

jQuery

jQuery je JavaScriptová knihovna, která zjednodušuje použití JavaScriptu v (X)HTML dokumentu (jQuery je možné si zkoušet např. v jQuery zkoušečce).

Dean Edwards IE

Dean Edwards IE je JavaScriptová knihovna umožňující naučit Internet Explorer W3C standardům:

• opravuje mnoho HTML a CSS problémů
• umožňuje používat transparentní PNG obrázky

Nevýhody:

• funkční pouze ve webovém prohlížeči se zapnutou podorou JavaScriptu
• vyžaduje strojový čas pro vykonání skriptu (nevhodné u velmi pomalých počítačů)
• velikost v základní konfiguraci cca 30kB (zůstává v cache)
• nic není dokonalé – vždy se mohou vyskytnout neočekávané situace

HTML5 script

HTML5 enabling script umožňuje prohlížeči Internet Explorer rozpoznat HTML5 prvky.

Modernizr

Modernizr - pokročilá detekce funkcí HTML5 a CSS3, která na základě detekce verze prohlížeče přidává do HTML prvků CSS třídy, které umožňují jednoduše definovat vzhled webových stránek ve starších prohlížečích, které ještě nepodporují HTML5 a CSS3. 

Otevření odkazu do nového okna (záložky)

<p>Webová standardizační organizace <a href="http://www.w3.org"
 type="text/html" charset="utf-8" hreflang="en" xml:lang="en"
 lang="en" title="The World Wide Web Consortium"
 onclick="return !window.open(this.href);" 
 onkeypress="return !window.open(this.href);">W3C</a></p>

Automatické otevření nového okna po načtení obrázku

Pozice left, top platí pro  IE4+, pozice screenX, screenY platí pro Netscape 4+

<img src="obrazek.jpg" onload="window.open('http://www.google.cz/',
 'reklama', 'width=600, height=400, left=100, top=100,
 screenX=100, screenY=100, location=no, directories=no,
 status=no, menubar=no, toolbar=no, copyhistory=no,
 scrollbars=yes, resizable=yes');" alt="Popis obrázku"/>

Průhlednost PNG formátu v IE6-

IE6- neumí zobrazit průhlednost u PNG obrázků. Můžete jej to ovšem naučit :)

Pokud webový prohlížeč neumí zobrazit PNG průhlednost, zobrazí místo ní barvu nastavenou jako barvu pozadí při ukládání obrázku.

Pouze obrázky

1. Z níže uvedeného kódu vytvořte soubor s názvem fix-png.js, který umístěte do svého webu např. do adresáře scripts/
   

   /*
     Correctly handle PNG transparency in Win IE 5.5 & 6. http://homepage.ntlworld.com/bobosola 
   */
   var arVersion = navigator.appVersion.split("MSIE")
   var version = parseFloat(arVersion[1])
   if ((version >= 5.5) && (document.body.filters)) {
     for(var i=0; i<document.images.length; i++) {
       var img = document.images[i]
       var imgName = img.src.toUpperCase()
       if (imgName.substring(imgName.length-3, imgName.length) 
        == "PNG") {
         var imgID = (img.id) ? "id='" + img.id + "' " : ""
         var imgClass = (img.className) ? "class='" + img.className 
          + "' " : ""
         var imgTitle = (img.title) ? "title='" + img.title 
          + "' " : "title='" + img.alt + "' "
         var imgStyle = "display:inline-block;" + img.style.cssText
         if (img.align == "left") imgStyle = "float:left;" + imgStyle
         if (img.align == "right") imgStyle = "float:right;" + imgStyle
         if (img.parentElement.href) imgStyle = "cursor:hand;" 
          + imgStyle
         var strNewHTML = "<span " + imgID + imgClass + imgTitle
          + " style=\"" + "width:" + img.width + "px; height:" 
          + img.height + "px;" + imgStyle + ";"
          + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
          + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
         img.outerHTML = strNewHTML
         i = i-1
       }
     }
   }

2. Do hlavičky stránky vložte níže uvedený kód s odkazem na soubor fix-png.js
   

   <meta http-equiv="content-script-type" content="text/javascript" />
   <!--[if (lte IE 7)&(gte IE 5)]>
     <script defer type="text/javascript" src="scripts/fix-png.js">
     </script>
   <![endif]-->

IE5- nepodporuje žádný JavaSript.

Obrázky a obrázkové mapy

1. Z níže uvedeného kódu vytvořte soubor s názvem fix-png-map.js, který umístěte do svého webu např. do adresáře scripts/
   

   /*
     Correctly handle PNG transparency in Win IE 5.5 & 6.
     http://homepage.ntlworld.com/bobosola/imagemap.htm
   */
   var strGif = "scripts/transparentpixel.gif"
   var strFilter = "progid:DXImageTransform.Microsoft.AlphaImageLoader"
   var arVersion = navigator.appVersion.split("MSIE")
   var version = parseFloat(arVersion[1])
   if ((version >= 5.5) && (document.body.filters)) {
     for(var i=0; i<document.images.length; i++) {
       var img = document.images[i]
       var imgName = img.src.toUpperCase()
       if (imgName.substring(imgName.length-3, imgName.length)
        == "PNG") {
         var imgID = (img.id) ? "id='" + img.id + "' " : ""
         var imgClass = (img.className) ? "class='" + img.className 
          + "' " : ""
         var imgTitle = (img.title) ? "title='" + img.title
          + "' " : "title='" + img.alt + "' "
         var imgStyle = "display:inline-block;" + img.style.cssText 
         if (img.align == "left") imgStyle = "float:left;" + imgStyle
         if (img.align == "right") imgStyle = "float:right;" + imgStyle
         if (img.parentElement.href) imgStyle = "cursor:hand;"
          + imgStyle
         if (img.useMap) {  
   	var strAddMap = "<img style=\"position:relative; left:-"
            + 0 + "px; top:" + 0 +"px;" + "height:" + img.height
            + "px;width:" + img.width +"\" " + "src=\"" + strGif
            + "\" usemap=\"" + img.useMap + "\" border=\"" + img.border
            + "\"></span>"
   	var strNewHTML = "<span " + imgID + imgClass + imgTitle
            + " style=\"" + "width:" + img.width + "px; height:"
            + img.height + "px;" + imgStyle + ";" + "filter:"
            + strFilter + "(src=\'" + img.src + "\',
            sizingMethod='scale');\">" 
   	strNewHTML += strAddMap
         }
         else {
   	var strNewHTML = "<span " + imgID + imgClass + imgTitle
           + " style=\"" + "width:" + img.width + "px; height:"
           + img.height + "px;" + imgStyle + ";" + "filter:"
           + strFilter + "(src=\'" + img.src + "\',
           sizingMethod='scale');\"></span>"
         } 
         img.outerHTML = strNewHTML
         i = i-1
       }
     }
     for(i=0; i < document.forms.length; i++)
      findImgInputs(document.forms(i))
   }
   function findImgInputs(oParent) {
     var oChildren = oParent.children
     if (oChildren) {
       for (var i=0; i < oChildren.length; i++) {
         var oChild = oChildren(i)
         if ((oChild.type == 'image') && (oChild.src)) {
   	var origSrc = oChild.src
           oChild.src = strGif
           oChild.style.filter = strFilter + "(src='" + origSrc + "')"
         }
         findImgInputs(oChild)
       }
     }
   }
   

2. Vyptvořte si průhledný obrázek o velikosti 1x1 px ve formátu GIF s názvem např. transparentpixel.gif, který umístěte do svého webu např. do adresáře scripts/. V případě jiného umístění obrázku upravte ve skriptu proměnnou strGif.
3. Do hlavičky stránky vložte níže uvedený kód s odkazem na soubor fix-png.js
   

   <meta http-equiv="content-script-type" content="text/javascript" />
   <!--[if (lte IE 7)&(gte IE 5)]>
     <script defer type="text/javascript" src="scripts/fix-png-map.js">
     </script>
   <![endif]-->

IE5- nepodporuje žádný JavaSript.

Oprava vzhledu elementu <object> v IE7-

IE7- nastavuje u elementu <object> vlastní okraje, rámeček a vertikální posuvník. Tomuto chování je možné zabránit:

1. z níže uvedeného kódu vytvořte soubor s názvem fix-object.js, který umístěte do svého webu např. do adresáře scripts/
   

   function fixObjectImages () {
     var objs = document.getElementsByTagName ('object');
     for (n = 0; n < objs.length; n++) {
       var obj = objs [n];
       if ((obj != null && obj.type != null) && ((obj.type ==
        "image/png") || (obj.type == "image/jpeg") || (obj.type ==
        "image/gif"))) {
         fixObject (obj);
       }
     }
   }
   function fixObject (obj) {
     obj.body.style.margin = '0';
     obj.body.style.border = 'none';
     obj.body.style.overflow = 'hidden';
   }
   // Do this only for IE!
   window.onload = fixObjectImages; 

2. do hlavičky stránky vložte níže uvedený kód s odkazem na soubor fix-object.js
   

   <meta http-equiv="content-script-type" content="text/javascript" />
   <!--[if (lte IE 7)&(gte IE 5)]>
     <script type="text/javascript" src="scripts/pngfix.js">
     </script>
   <![endif]-->

IE5- nepodporuje žádný JavaSript

Cvičení 7

Pomocí přiložených dat přidejte do obrázkové mapy ve fotogalerie ze cvičení 5 šipky pro přechod na předchozí a následující fotografii.

Kulaté rožky

Kulaté rožky je možné vytvářet pomocí CSS vlastnosti border-radius.

Curvy Corners

Curvy Corners používají k vytovření kulatých rožků JavaScript.

Níže uvedený příklad použije JavaScript na vytváření kulatých rožků vždy (zvyšuje zátěž počítače):

  ...
  <style type="text/css">
    /* <![CDATA[ */
      .rounded {
        background-color: #ff0;
        border: 3px solid #f00;
      }
    /* ]]> */
  </style>
  <meta http-equiv="content-script-type" content="text/javascript" />
  <script type="text/javascript" src="scripts/curvycorners.js"></script>
  <script type="text/javaScript">
    /* <![CDATA[ */
      addEvent(window, 'load', initCorners);
      function initCorners() {
        var settings = {
          tl: {radius: 20},
          tr: {radius: 20},
          bl: {radius: 20},
          br: {radius: 20},
          antiAlias: true
        }
        curvyCorners(settings, ".rounded");
      }
    /* ]]> */
  </script>
</head>
<body>
  <h1>Curvy Corners</h1>
  <div class="rounded">
    Content
  </div>
  ...

Níže uvedený příklad použije JavaScript pouze v případě, kdy prohlížeč nepodporuje CSS3 vlastnot border-radius:

  ...
  <style type="text/css">
    /* <![CDATA[ */
      .rounded {
        background-color: #ff0;
        border: 3px solid #f00;
        /* Do rounding (native in Firefox and Safari) */
        border-radius: 20px;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
      }
    /* ]]> */
  </style>
  <meta http-equiv="content-script-type" content="text/javascript" />
  <script type="text/JavaScript" src="scripts/curvycorners.js"></script>
</head>
<body>
  <h1>Curvy Corners</h1>
  <div class="rounded">
    Content
  </div>
  ...

Nifty Corners

Nifty Corners nabízí další způsob vytvoření kulatých rožků.

Překrytí stránky

Lightbox2 – pouze obrázky

Shadowbox – obrázky, stránky, multimédia

Greybox – obrázky, stránky, multimédia