Chrome zmenšování obrázků

Chrome ve windows je tak trochu retard. Ve výchozím nastavení zmenšuje obrázky tak, že se mohou jevit jako rozmazané. V žádném jiném prohlížeči se to neděje.

Pokud tedy po něm potřebujete zobrazovat obrázky v jiné velikosti, než v jaké máte zdroj, je zapotřebí přidat do CSS toto:

img {
  image-rendering: -webkit-optimize-contrast;
}

Zabrání to tomu extrémnímu rozmazání, a přitom to pořád bude vyhlazené a nebude to rozpixelované.

Bohužel, toto řešení však negativně ovlivní safari na macu (kvůli stejnému webkit jádru), kdy naopak při změně obrázků k žádnému vyhlazování nedochází anebo jen minimálně, takže je nutné tento zásah omezit jen pro chrome. Na řadu tedy přichází CSS hack:

@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
  img {
    image-rendering: -webkit-optimize-contrast;
  }
}

Snad to bude nějakou dobu fungovat.

Stylování tabulek v css

Pohodlné a efektní ostylování řádků tabulky se nemusí dělat přes javascript, ale pomůže css. Vložte do css následující:

.tigra {
    border-collapse: collapse;
    margin: 0 auto;
}
.tigra th {
    padding: 0 3px;
}
.tigra td {
    vertical-align: middle;
}
.tigra tbody tr:nth-child(odd) {
    background: #e6eaeb;
}
.tigra tbody tr:nth-child(even) {
    background: #ffffff;
}
.tigra tbody tr:nth-child(2n+1):hover {
    background: #C3CCD0;
}
.tigra tbody tr:nth-child(2n):hover {
    background: #C3CCD0;
}

A pak v html dejte tabulku do třídy „tigra“.

<table class="tigra">
<thead>
<tr><th>sloupec 1</th><th>sloupec 2</th></tr>
</thead>
<tbody>
<tr><td>řádek 1</td><td>řádek 1</td></td>
<tr><td>řádek 2</td><td>řádek 2</td></td>
</tbody>
</table>