xHTML « Ez egy Kecs.es blog

1jan/120

IE6 float és a margin bug

Tudom, hogy az IE6 halott és már el is temették. Sőt a jelenlegi kereskedelmi honlapokon amelyeket üzemeltetünk az IE6 előfordulása aránya kisebb mint 1%, de akkor is előfordulhat, hogy valaki egy olyan speciális környezetre kell, hogy optimalizáljon ahol még mindig IE6 a menő.

Ha ilyennel feladattal találkozol, akkor ez a post igen hasznos lesz számodra. Ismeretes ugyanis, ha IE6 alatt egy elemet float:left tulajdonsággal látunk el, akkor valami miatt a margint megduplázza a böngésző. Ezt nevezzük IE6 floating bug-nak. Ennek kivédésére a régebbi és általam ismert módszer az IE6-ra optimalizált CSS volt (minden úsztatott elem margin értéke az eredeti fele), azaz feltételhez kötött stíluslapot használtunk:

<!--[if IE 6]>
<style type="text/css" rel="stylesheet" media="screen" href="theme.ie6.css" />
<![endif]-->

Ezzel szemben ma egy új és sokkal egyszerűbb megoldást találtam. Egyszerűn az úsztatandó elemnek meg kell adni, hogy innentől legyen inline elem. A modern böngészőkben ennek semmi hatása, viszont IE6 esetén megjavítja a box modellt!

.float {
  float: left;
  display: inline;
}

Tagged as: Box modell, CSS, IE6, xHTML No Comments

14szept/090

xHTML kimenet tömörítése

Mostanában sokat foglalkoztam honlapok optimalizációjával, nem csak SEO értelemben. Így futottam bele az YSlow FrieBug kiegészítése. Nézegettem az ajánlásait, s ezen új szemlélet megismerése kapcsán írok majd néhány scriptet. Nem tudom észrevettétek-e de már voltak hasonló gondolatok itt, csak azok átkerültek az Érdekes oldalak alá. Ott megtalálhatjátok, a JavaScript és CSS kompresszorokat.

Az első nem más, mint hogy hogyan érhetjük el nagyon egyszerűen, hogy a kimeneten fölösleges (whitespace) karakterek ne legyenek. Ezzel "tömörítve" az xHTML kódunkat. A most következő PHP kódunk lényege az, hogy egy kimeneti pufferbe begyűjti a teljes weblapot, majd amikor a kimenetet kiküldi, előtte meghív rá egy függvényt, ami a fölösleges karaktereket eltünteti.

Mivel ez a drágalátos WordPress nem enged mindenféle kódot beleírni egy postba, ezért a megoldást kénytelen vagyok linkelni... Az eredeti cikk ahonnan a forrás jött:

http://davidwalsh.name/compress-xhtml-page-output-php-output-buffers

Tagged as: PHP, xHTML No Comments

28aug/090

Link megnyitása új ablakban valid xHTML kód mellett

Mint gondolom sokan észrevettétek, az xHTML 1.x szabványból a W3C kihagyta az anchor tagok target paramétert. Így lehetetlenné vált olyan szabványos xHTML kódot készíteni amiben a linkek új ablakban nyílnak meg. Jelenlegi írásom ezt hivatott kijavítani.

A megoldáshoz jQuery-t használok majd, és így elég gyorsan és könnyen meg lehet oldani.

A javascript amire szükségünk van:

  <script type="text/javascript">
    $(document).ready(function(){
      $('a.out').each(function(){
        $(this).attr({ 
          target: "_blank"
        });
      });
    });
  </script>

Továbbá azon linkeket melyeket új ablakban szeretnénk megnyitni, már csak egy class="out" paraméterrel kell ellátnunk.

  <a href="domain.tld" class="out">domain.tld</a>

Majd a kódunk eredménye látható is az oldal betöltése után:

  <a href="domain.tld" class="out" target="_blank">domain.tld</a>

Ezzel a pici trükkel a böngészők értesülnek arról, hogy azt szeretné a webfejlesztő, hogy a link úja ablakban nyíljon meg, s ennek eleget is tesznek. S a kód is valid lesz, a módosítás utólagos, melyet egyetlen validátor sem ellenőriz, hiszen a javascripteket nem futtatják le.

Tagged as: javascript, jQuery, valid, xHTML No Comments

Felhasználóknak

Oldalak

Legutóbbi hozzászólások

Címkék

Archívum

Ajánlott megtekinteni

Barátok honlapjai

Ez egy Kecs.es blog webfejlesztési ötletek, tanácsok, észrevételek