blog.michalprihoda.cz

Jednoduché ukaž / schovej div

HTML:

Ukaž text
Text

JS:

$('.toggleDiv').toggle(
function(){
$(this).text('Skrýt text');
$('#toggleInfo').slideDown();
},
function(){
$(this).text('Ukaž text');
$('#toggleInfo').slideUp();
}
);

Zda napíšu pár poznámek k tomu co se vyplatí z CSS3 používat. Nejen že to uspoří čas, ale i výslednou velikost stránek. Většina vlastností nemá plnou podporu, proto je nutno zapisovat více příkazy.

1. Box shadow

Tato CSS vlastnost přidává stín k blokovému prvku.

.shadow {
-moz-box-shadow:inset 0 0 10px #000000;
-webkit-box-shadow:inset 0 0 10px #000000;
box-shadow:inset 0 0 10px #000000;
}

Parametry: posun v ose Y posun v ose X velikost barva

Podpora: IE9, Chrome, Opera, Firexox, IE8 a IE7 viz. na konci článku

2. Border radius

Tato CSS vlastnost zakulatí rohy blokového prvku.

Zda napíšu pár poznámek k tomu co se vyplatí z CSS3 používat. Nejen že to uspoří čas, ale i výslednou velikost stránek. Většina vlastností nemá plnou podporu, proto je nutno zapisovat více příkazy.

.radius {
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
.radiusTop {
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}


Parametry: velikost

Podpora: IE9, Chrome, Opera, Firexox, IE8 a IE7 viz. na konci článku

Závěr

Pro podporu těchto vlastností v IE7 a IE8  je dobré využít soubor PIE.htc, který i s grafickým udělátkem najdete na stránkách http://css3pie.com/.

Na internetu najdete spousty generátorů, která vám mohou při začátcích ušetřit práci. Pro border-radius například http://border-radius.com/.

A ještě jsem našel článek v češtině trochu rozsáhlejší než mám já http://www.24development.cz/blog/css-shadow-cross-browser.htm.

Rozhodl jsem se sepsat pár rad pro tvorbu html emailů, určitě nepohltím všechny zrádnosti. Ale jako základ pro tvorbu to bude dobré.

Obecné rady

• v žádném případě nepoužíváme wysiwyg editor
• zapomeneme na sémantiku
• email odesíláme jako html a plain text
• každý newsletter má možnost odhlášení z databáze, ideálně v patičce
• snažíme se o co nejmenší obrázky
• v emailu můžeme uvést odkaz na newsletter zveřejněný na webu

A již ke kódování

• nepoužíváme javasritpt ani flash, pouze HTML, ideálně HTML4 a obrázky
• css používáme pouze inline
• nestylujeme tagy html ani body
• písmo definujeme v px
• základní layout děláme pomocí tabulek
• ideální šířka emailů 600px
• obrázky na pozadí nepoužíváme
• float nepoužíváme, nahradíme tabulky
• každý obrázek má šířku, výšku i ALT
• každý obrázek by měl mít align=“middle“, jinak hrozí mezi obrázky mezera

Testujem, testujem a raději ještě jednou testujem

• modlíme se aby email nemusel být odladěn i pro Lotus Notes – můžeme potom rovnou zapomenout na CSS
• jako první otevřeme email v IE6, správné zobrazení nám zaručí vcelku velkou další úspěšnost
• po odeslání
  • online klienti – kontrolujeme vždy v IE a jednom jiném prohlížeči
    • gmail.com
    • seznam.cz
    • centrum.cz
    • dle libosti i další, již ale nehrozí velké riziko špatného vykreslení
  • desktopové klienti
    • aktuální Outlook
    • Outlook 2003
    • Windows Live mail
    • aktuální Thunderbird
    • dle libosti i další, již ale nehrozí velké riziko špatného vykreslení

Doplněk: narazil jsem na hezkou tabulku s emailovými klienty a jejich vlastnosti http://www.campaignmonitor.com/downloads/documents-tools/Campaign_Monitor_Guide_to_CSS_Support_in_Email_April_2010.pdf