Oct 15, 2010
Pagini mai usoare, pentru Internet Explorer 6
Daca ai mult JavaScript intr-un site, pentru a fi crema de pe tort in materie de siteuri trendy, trebuie sa te astepti si la probleme serioase atunci cand vine vorba de un vizitator ce are calculator slab sau Internet Explorer 6 (sau ambele). O solutie este sa le livrezi paginile fara atata bling-bling, pentru ca mai bine un vizitator neimpresionat vizual decat unul frustrat datorita blocajelor sau erorilor.
Exemplu concret: Cufon si WordPress. Cufon iti face fonturile de pe site incredibil de atragatoare, dar pe de alta parte, vine cu cateva sute de kilobytes de javascript la incarcarea paginilor si la randarea lor (construirea lor de catre browser). Este foarte posibil ca utilizarea Cufon sa-ti dubleze cantitatea de javascript descarcata si executata, lucru care pur si simplu nu este fezabil pe Internet Explorer 6. Si-atunci: daca vizitatorul are IE6, nu-i servim fonturi Cufon. Cum facem asta?
1. Aflam ce browser are userul. Un search pe google ne duce la un exemplu de pe stackoverflow:
$using_ie6 = (strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE 6.') !== FALSE);
Ne intereseaza neaparat sa aflam inca din PHP daca are IE6 si NU din browser, pentru ca daca are IE6, nici nu-i mai trimitem fisierele JS.
2. Inseram codul de verificare in functions.php din tema, pentru ca vrem sa se execute inainte sa se trimita pagina:
global $bUsingie6;
$bUsingie6 = (strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE 6.') !== FALSE);
Avem nevoie de ‘global’ pentru a avea acesta variabila universal valabila
3. In sectiunea <head> a paginilor (de regula in header.php), acolo unde avem ceva de genul:
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/cufon-yui.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/proxima_nova_cn_lt_italic_600.font.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/cambria_400.font.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/proxima_nova.font.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/rolla-1-2.js"></script>
<script type="text/javascript">
Cufon.replace('h1', { fontFamily: 'cambria' });
Cufon.replace('h2');
Cufon.replace('h2.post', { fontFamily: 'cambria' });
Cufon.replace('h3', { fontFamily: 'cambria' });
Cufon.replace('h4');
</script>
imbracam bucata de cod cu cu o verificare:
<?php if( !$bUsingie6 ): ?>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/cufon-yui.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/proxima_nova_cn_lt_italic_600.font.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/cambria_400.font.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/proxima_nova.font.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/rolla-1-2.js"></script>
<script type="text/javascript">
Cufon.replace('h1', { fontFamily: 'cambria' });
Cufon.replace('h2');
Cufon.replace('h2.post', { fontFamily: 'cambria' });
Cufon.replace('h3', { fontFamily: 'cambria' });
Cufon.replace('h4');
</script>
<?php endif; ?>
Si asta-i tot. De fiecare data cand vizitatorul este un (nefericit) posesor de Internet Explorer 6, va primi acelasi continut, doar fara rotunjirile si cosmetizarile suplimentare.