<commit_before>---
title: Suporte para browsers antigos
description: Entenda como melhorar o suporte a browsers antigos, como o IE8
---

<%= partial 'partials/doc-menu-intro'%>

<section class="col-md-9">
  <%= partial 'partials/doc-intro-content' %>
  <p>O Locawebstyle dá suporte a todos os navegadores atuais, já nos antigos esse suporte está no formato Progressive Enhancement, sendo que os componentes e o layout funcionam na experiência máxima que o browser suporta.</p>
  <p>Para dar suporte ao Internet Explorer 8, é necessário implementar algumas modificações:</p>
  <ol>
    <li><a href="http://jquery.com/download/" target="_blank" class="ls-color-theme">jQuery</a> com suporte a navegadores antigos. Nesse caso, você precisa usar a jQuery na versão 1.11 ou menor. As versões mais novas, da 2.0 ou superior, não suportam browsers antigos.</li>
    <li><a href="https://code.google.com/p/html5shim/" target="_blank" class="ls-color-theme">html5shiv</a>. Esse plugin JavaScript faz os browsers antigos conhecerem as tags do HTML5.</li>
    <li><a href="https://code.google.com/p/css3-mediaqueries-js/" target="_blank" class="ls-color-theme">mediaqueries</a>. Faz browsers antigos suportarem as mediaqueries do CSS.</li>
    <li><a href="http://selectivizr.com/" target="_blank" class="ls-color-theme">Selectivizr</a> para os browsers entenderem os novos seletores do CSS3.</li>
  </ol>

  <p>Abaixo um exemplo usando as tags condicionais da Microsoft. Nós tentamos sempre usar os princícios do Progressive Enhancement para que os browsers antigos tenham a melhor experiência possível.</p>

  <% code("html") do %>

<!--[if lt IE 9]>
  <script type="text/javascript" src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
  <script type="text/javascript" src="//css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/selectivizr/1.0.2/selectivizr-min.js"></script>
<![endif]-->
  <% end %>

  <h2 class="doc-title-2">Adicionando uma barra de aviso</h2>
  <p>Você pode inserir uma barra de aviso sobre os browsers que não são suportados. Por padrão, o Locaweb Style não insere essa barra, por isso você precisa iniciar a função manualmente. Para tanto, basta chamar a função <code>locastyle.browserUnsupportedBar</code>:</p>

  <% code("javascript") do %>
$(window).load(function() {
  locastyle.browserUnsupportedBar.init();
});
  <% end %>

  <p>Geralmente nós mantemos o suporte para browsers com duas versões anteriores. Por exemplo: a versão mais atual do IE é a 11, por isso damos suporte para o IE 9, 10 e 11. A barra, nesse caso iria aparecer para o IE8 ou inferior.</p>

</section><commit_msg>Added new browser detection class on documentation<commit_after>---
title: Suporte para browsers antigos
description: Entenda como melhorar o suporte a browsers antigos, como o IE8
---

<%= partial 'partials/doc-menu-intro'%>

<section class="col-md-9">
  <%= partial 'partials/doc-intro-content' %>
  <p>O Locawebstyle dá suporte a todos os navegadores atuais, já nos antigos esse suporte está no formato Progressive Enhancement, sendo que os componentes e o layout funcionam na experiência máxima que o browser suporta.</p>
  <p>Para dar suporte ao Internet Explorer 8, é necessário implementar algumas modificações:</p>
  <ol>
    <li><a href="http://jquery.com/download/" target="_blank" class="ls-color-theme">jQuery</a> com suporte a navegadores antigos. Nesse caso, você precisa usar a jQuery na versão 1.11 ou menor. As versões mais novas, da 2.0 ou superior, não suportam browsers antigos.</li>
    <li><a href="https://code.google.com/p/html5shim/" target="_blank" class="ls-color-theme">html5shiv</a>. Esse plugin JavaScript faz os browsers antigos conhecerem as tags do HTML5.</li>
    <li><a href="https://code.google.com/p/css3-mediaqueries-js/" target="_blank" class="ls-color-theme">mediaqueries</a>. Faz browsers antigos suportarem as mediaqueries do CSS.</li>
    <li><a href="http://selectivizr.com/" target="_blank" class="ls-color-theme">Selectivizr</a> para os browsers entenderem os novos seletores do CSS3.</li>
  </ol>

  <p>Abaixo um exemplo usando as tags condicionais da Microsoft. Nós tentamos sempre usar os princícios do Progressive Enhancement para que os browsers antigos tenham a melhor experiência possível.</p>

  <% code("html") do %>

<!--[if lt IE 9]>
  <script type="text/javascript" src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
  <script type="text/javascript" src="//css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/selectivizr/1.0.2/selectivizr-min.js"></script>
<![endif]-->
  <% end %>

  <h2 class="doc-title-2">Adicionando uma barra de aviso</h2>
  <p>Você pode inserir uma barra de aviso sobre os browsers que não são suportados. Por padrão, o Locaweb Style não insere essa barra, por isso você precisa iniciar a função manualmente. Para tanto, basta chamar a função <code>locastyle.browserUnsupportedBar</code>:</p>

  <% code("javascript") do %>
$(window).load(function() {
  locastyle.browserUnsupportedBar.init();
});
  <% end %>

  <p>Geralmente nós mantemos o suporte para browsers com duas versões anteriores. Por exemplo: a versão mais atual do IE é a 11, por isso damos suporte para o IE 9, 10 e 11. A barra, nesse caso iria aparecer para o IE8 ou inferior.</p>

<h2 class="doc-title-3">Classes com o nome do navegador</h2>
  <p>
    Quando o locastyle é iniciado, automaticamente é adicionado uma classe correspondente ao navegador acessado.
    <br>
    Isso possibilita criar conteúdos exclusivos para certos navegadores e possíveis melhorias.
  </p>
  <table class="ls-table">
    <thead>
      <tr>
        <th>Nome</th>
        <th>Descrição</th>
      </tr>
    </thead>
    <tbody>
      <tr><td>.ls-browser-"navegador" <strong>(exemplo: .ls-browser-chrome)</strong></td><td>Classe adicionada na tag html</td></tr>
    </tbody>
  </table>

</section>
{'fraction_non_alphanumeric': 0.13190996358821583, 'fraction_numerical': 0.011089043363124794, 'mean_word_length': 4.3572695035460995, 'pattern_counts': {'":': 0, '<': 124, '<?xml version=': 0, '>': 124, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '11152', 'n_tokens_mistral': 2155, 'n_tokens_neox': 2051, 'n_words': 628}