6

Não é bem um problema, e sim uma dúvida que pode resolver vários dos meus problemas.

Digamos que eu carregue esse arquivo CSS pra meu site:

<link href='http://host-1.com/style.css' rel='stylesheet' type='text/css'/>

Mas se o host-1.com estiver fora do ar? Há alguma maneira de verificar isso e usar outro arquivo, exemplo:

<link href='http://host-2.com/style.css' rel='stylesheet' type='text/css'/>

Como se eu quisesse dizer assim pro meu código:

//Carregar esse arquivo css
<link href='http://host-1.com/style.css' rel='stylesheet' type='text/css'/>
//Mas no caso dele não funcionar, carregue esse:
<link href='http://host-2.com/style.css' rel='stylesheet' type='text/css'/>
3
  • Se for um "espelho" você pode incluir os dois, porem, isso vai obrigar o usuário a baixar os dois arquivos quando ambos estiverem funcionado.
    – mau humor
    7/01/2017 às 19:49
  • 1
    Se o CSS for BEM enxuto, e a carga dele tão importante, você pode colocar ele inline na página (em um bloco <style>), garantindo que ele esteja presente sempre. Só tem que entender o custo disso: não aproveita cache em páginas diferentes, vai ser carregado toda vez, e dar um pouco mais de trabalho na manutenção (mas nem tanto quanto dizem). Nâo é o normal, mas se a situação requer, não é errado como o pessoal exagera por aí.
    – Largato
    7/01/2017 às 21:30
  • @Bacco para falar a verdade, se pega sites um pouquinho mais antigo para manutenção e isso é bem utilizado se naum o mais..kkkk
    – MagicHat
    7/01/2017 às 21:35

3 Respostas 3

8

Em HTML puro não é possivel, mas se usar Javascript pode fazer algo como:

function loadCssFallback(el)
{
    var url = el.getAttribute("data-fallback");
  
    console.log("Carregando fallback:", url);
  
    el.onerror = null;
    el.href = url;
}
<link rel="stylesheet"
      type="text/css"
      href="normal.css"
      onerror="loadCssFallback(this)"
      data-fallback="fallback.css"
>

Note que eu crie um atributo chamado data-fallback, ele deve conter o endereço do CSS alternativo.

Uma outra maneira, acaso tenha vários fallbacks, também usando JavaScript seria criando dinamicamente o elemento e testando com onerror. A função ficaria assim loadCssFallback(<array com endereços css> [, <log>]);, ficando assim:

  • loadCssFallback([ "//cdn.site.com/fallback.css", "css1.css" ]); sem log no console
  • loadCssFallback([ "//cdn.site.com/fallback.css", "css1.css" ], true); exibe o log no console

Exemplo completo:

function loadCssFallback(urls, log)
{
    var link, current = 0;

    function done()
    {
        if (log && console) {
            console.log("Loaded", link.href);
        }

        link.onload = link.onerror = null;
    }

    function trigger()
    {
        if (log && console) {
            console.log("Iniciou...");
        }

        tryNext();
    }

    function tryNext()
    {
        current++;

        if (!urls[current]) {
             console.log("Nenhum CSS carregou");
             return;
        }

        loadCss(urls[current]);
    }

    function loadCss(url)
    {
        if (log && console) {
            console.log("Carregando CSS", current, urls[current]);
        }

        link = document.createElement("link");
        link.rel = "stylesheet";
        link.type = "text/css";

        link.onerror = tryNext;

        link.onload = done;

        link.href = url;

        document.head.appendChild(link);
    }

    //Verifica se a página já foi carregada
    if (/^(interactive|complete)$/i.test(document.readyState)) {
        trigger();
    } else {
        document.addEventListener('DOMContentLoaded', trigger);
    }
}

var meusCSSs = [
    "cssprincipal.css",
    "fallback1.css",
    "fallback2.css",
    "fallback3.css",
    "https://cdn.sstatic.net/Sites/br/all.css?v=a482a814f698"
];

loadCssFallback(meusCSSs, true);

3
  • No caso do js estar desativado como faz ?
    – MagicHat
    7/01/2017 às 22:24
  • @MagicHat creio eu que praticamente todos sites feitos nos ultimos anos usem JS e se estiver com JS desligado ae vai causar outros problemas e esse será apenas mais um, ou seja não usar Javascript ligado hoje é quase o mesmo que haver um apagão geral, fazendo os principais meios de transporte pararem.
    – Syzoth
    8/01/2017 às 1:20
  • concordo, mas ao meu ver, existe a possibilidade de oferecer 1 opção a mais, utilizando html.
    – MagicHat
    8/01/2017 às 1:22
4

Sim, basta declará-los dentro da tag head.

Um exemplo seria:

<head>
    <link href='http://host-1.com/style.css' rel='stylesheet' type='text/css'/>
    <link href='http://host-2.com/style.css' rel='stylesheet' type='text/css'/>
</head>

O que acontecerá, é que os 2 serão carregados e 1 irá conflitar(mas vão carregar, o que vai conflitar é o CSS interno de ambos e dependendo vão se sobrepor) com o outro caso o conteúdo seja diferente. Caso não seja, o browser usará o último declarado.

Para fazer uma verificação se houve problema de carregamento de um arquivo específico antes de usá-lo, necessitará de uma linguagem de programação propriamente dita, o que está ausente em suas tags.

14
  • 1
    Você não respondeu a pergunta. Foi requisitado um condicional para carregar a segunda opção, quando a primeira falha, no meu entendimento.
    – mau humor
    7/01/2017 às 19:50
  • 1
    Lembrando que quando não se tem uma resposta completa, porem tem uma dica valiosa, ou algo que pode ajudar, é possivel comentar a pergunta.
    – mau humor
    7/01/2017 às 19:51
  • 1
    Ué, e por acaso eu respondi a pergunta?
    – mau humor
    7/01/2017 às 19:54
  • 1
    Se não tenho a resposta para o problema, simplesmente não crio uma resposta. E por isso que votei negativo.
    – mau humor
    7/01/2017 às 19:55
  • 1
    Sim, faço juz ao meu nick. Se estou equivocado, outros anularam meu voto negativo.
    – mau humor
    7/01/2017 às 20:00
2

Puramente com html e css, eu desconheço algum método de fazer essa comparação. Mas se você utilizar uma linguagem servidor, como o php, poderá conseguir o que deseja.

Primeiro passo seria você delegar ao php o include do seu css da seguinte maneira:

<link href='css-handler.php' rel='stylesheet' type='text/css'/>

nesse arquivo css-handler.php você precisará de fazer o include do css, mas você terá ferramentas para fazer sua desejada condicional. Essa condicional você pode fazer se utilizando do cURL:

<?php

function verifyIdCssExists($css) {
    // Verificar local 
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $css);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    $data = curl_exec($ch);
    $code = curl_getinfo($ch, CURLINFO_HTTP_CODE);
    curl_close($ch);

    // Se achou, beleza, usa ele
    if($code == '200')
        die($data);
}

$cssOptions = [
    'http://host-1.com/style.css',
    'http://host-2.com/style.css',
    'http://host-3.com/style.css',
];

foreach($cssOptions as $cssLink)
    verifyIdCssExists($cssLink);

Esse código tá super meia boca, só pra ilustrar a ideia mesmo, mas funciona. Você pode aprimorar ele melhor caso seja de sua necessidade.

1
  • 1
    PS: gostei de ter feito com PHP, embora ache a solução do Guilherme melhor, melhorei o código para você.
    – Leonardo
    7/01/2017 às 20:52

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .