Max-width su IE

This entry was posted on November 5th, 2008 and is filed under CSS, jQuery, javascript.

Benvenuto! Se è la prima volta che arrivi sul blog, magari ti interessa iscriverti al mio feed RSS per restare aggiornato.

Dopo aver parlato di:

oggi vi parlo dell’hack CSS più complicato: impostare una larghezza massima (max-width) riconoscibile da Internet Explorer 6.

Finora non ho trovato una soluzione “solo CSS” che funzionasse e quindi purtroppo si è costretti a sporcare il codice CSS con del Javascript all’interno.

Supponendo di volere un div con larghezza compresa tra 600 e 1200 pixel bisognerà inserire nel CSS qualcosa del genere:


#container {
  min-width: 600px;
  max-width: 1200px;
  width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? "1200px" : "auto");
}

Non mi piace sinceramente una soluzione del genere. Ammesso che funzioni sempre, cosa che ho testato solo con dimensioni espresse in pixel, non è per nulla pulito il codice cosi. Non trovando una soluzione che utilizzi solo CSS ho optato per una soluzione che usa solo Javascript; perlomeno resta la suddivisione del codice e un minimo di pulizia. La soluzione l’ho trovata sul sito di JamesMarquez.

Dato che il framework che preferisco è jQuery vi rimando al link di JamesMarquez.com ma, dando un’occhiata al codice, capirete che è facile implementarla sia senza alcun framework che con tutti gli altri.

Ripeto, questo genere di soluzioni non mi piace, però dovendo scegliere la vedo un pò più pulita rispetto a mischiare CSS con Javascript.

Di seguito il codice necessario alla realizzazione:


$(document).ready(function()
{
  // get the CSS container width values
  var min_width	= parseInt($('#container').css('min-width'));
  var max_width	= parseInt($('#container').css('max-width'));

  // resize the container on page load
  resizeContainer();

  $(window).resize(function()
  {
    if (min_width!='undefined' &amp;&amp; max_width!='undefined')
    {
      resizeContainer();
    }
  });

  function resizeContainer()
  {
    var old_width 	= document.body.offsetWidth;
    var new_width	= old_width;

    if (old_width > max_width)
    {
      new_width = max_width - 40 + 'px';
    }
    else if (old_width < min_width)
    {
      new_width = min_width - 40 + 'px';
    }
    else
    {
      new_width = '96%';
    }

    $('#container').css({width: new_width});
  }
});

Via | sitepoint.com
Via | JamesMarquez.com