Quando uma tarefa pode ser realizada por Javascript ou CSS, é melhor usar CSS? [fechadas]

11

Eu sempre veto JavaScript usando CSS, tanto quanto possível.

ou seja, crio guias e botões de rolagem usando CSS em vez de JavaScript.

Eu já vi algumas soluções - especificamente a estrutura da Web Wt - que defendem o JavaScript; mas faça o downgrade gracioso para CSS se o navegador não for capaz / js-disabled.

Eu sei que CSS e JavaScript têm finalidades diferentes, no entanto, há sobreposição; qual é o bourne desta pergunta.

Devo continuar usando CSS, tanto quanto possível, sobre JavaScript?

AT
fonte

Respostas:

10

Sim.

O objetivo do CSS é layout, aparência e animações

O objetivo do JavaScript é a interação.

Se você estiver fazendo um layout, use CSS, se estiver definindo a aparência e o uso, se sua animação usando CSS3

Se você anexar manipuladores de eventos ou reagir à entrada do usuário, use JavaScript.

Observe que as pessoas usam JavaScript em vez de CSS para suporte ao navegador. Existem outras soluções, como emular recursos CSS usando javascript.

Raynos
fonte
1
Gosto de muitos dos recursos implementados no CSS3, no entanto, o suporte ao navegador tem sido lento e ainda preciso facilitar os navegadores herdados. Caso contrário, eu usaria o HTML5 também para validação de entrada: P
AT
javascript não é usado apenas para interação. Também pode ser usado para enviar dados de volta ao servidor da web e muitas outras coisas.
eriawan
A interação @eriawan pode ser um termo vago. mas o javascript é principalmente x quando interage com o usuário, em que x é arbitrário #
Raynos
12

Bem, essa é realmente uma pergunta muito interessante. Estou tentando pensar em como você faria uma referência em algo assim, especialmente porque na maioria das vezes nem o CSS nem o JavaScript farão coisas realmente intensivas em termos de computação em uma página da web.

Minha intuição diria que use CSS o máximo possível, mas não faça disso uma regra rígida e rápida.

a:hover {
  background-color: green;
}

é melhor semanticamente então

$('a').onmouseover(function() {
  $(this).css('background-color','green');
})

MAS

$('a').onmouseover(function() {
  if (somethingelsehappened) {
    $(this).css('background-color','green');
  }
})

seria difícil (embora não impossível) no CSS. Você poderia fazê-lo desta maneira.

$('a').onmouseover(function() {
  if (somethingelsehappened) {
    $(this).addClass('Green');
  }
})

a.green {
  background-color: green;
}

Essa seria realmente uma maneira um pouco mais estranha de fazer o que poderia ter sido feito diretamente no JavaScript, mas eu penso nisso há alguns minutos e, mesmo aqui, a solução certa pode muito bem ser um CSS, por exemplo se você estava definindo muitos atributos ao passar o mouse.

** Observe que não se espera que nenhum código funcione, apenas para fins de demonstração. **

Brian Hoover
fonte
3
Bem dito, mas para o seu segundo exemplo, eu também não hesitaria em usar a classe CSS (com um nome melhor). Existe uma sobreposição definitiva entre os dois em termos de apresentação e comportamento, mas nesses exemplos é bem direto - o comportamento está mudando a aparência na passagem do mouse, a aparência é descrita em CSS.
sevenseacat
3

Considere se você faz o seguinte na Yahoo Developer Network :

"Depois de analisar os números, encontramos uma taxa consistente de solicitações desabilitadas para JavaScript, pairando em torno de 1% do tráfego real de visitantes, com a taxa mais alta sendo de aproximadamente 2% nos Estados Unidos e a menor sendo de 0,25% no Brasil. os outros países testados mostraram números muito próximos de 1,3% ".

Com porcentagens tão baixas (no máximo), dificilmente vale a pena (a menos que os usuários de seus sites venham principalmente desses 2%) se preocupar com o caso em que os usuários têm o javascript desativado. O usuário médio não sabe como desativar o javascript e provavelmente não se importa. Se você estiver desenvolvendo um site técnico, considere a possibilidade de que eles desativem o javascript; no entanto, se houver, provavelmente estão acostumados a sites que não estão funcionando corretamente, pois muitos sites usam javascript intensamente.

Tudo o que foi dito, encontrei muitos casos em que o desenvolvimento de javascript facilita muito o que estou tentando realizar e outros em que o css faz o mesmo.

No final, cada "idioma" tem seu lugar apropriado no desenvolvimento da Web e usado com sabedoria pode melhorar o desenvolvimento e a experiência do usuário. Aprenda quais são esses usos (recomendo a experiência de aprender) e aplique com sabedoria. Na minha experiência, regras definidas como "Nunca use JS quando existe uma solução CSS" (parafraseada) raramente são as melhores no mundo prático.

Kenneth
fonte
Obrigado por isso, muita informação. Você pode expandir seu quarto parágrafo?
AT
3
CSS é uma ferramenta de "estilo" e Javascript é uma ferramenta de "interatividade". Eu descobri que é muito mais fácil criar menus suspensos, por exemplo, estilizados com css, mas animados com javascript. Você pode fazer isso com css? sim. Você pode martelar um prego com uma chave de fenda? sim. Para o exemplo inverso, se tudo o que você precisa fazer é mudar de cor em um link quando o mouse estiver sobre o link, provavelmente será um pouco exagerado usar o Javascript quando houver um elemento CSS projetado especificamente para esse fim. Você pode fazer isso com Javascript? Sim ... Você pode matar uma aranha com uma marreta? Sim ...
Kenneth
2

JavaScript é uma linguagem de computador real, o que significa que possui estado e controle da execução do programa. Como tal, não há limite superior para quão complexa ela pode se tornar, e qualquer coisa que você escrever nela provavelmente terá um mínimo substancial de complexidade. CSS é um código descritivo; sua complexidade é limitada ao nível de complexidade que uma receita pode ter. Portanto, se algo puder ser feito tanto em CSS quanto em JavaScript, eu preferiria usar CSS, pois ele é menos complexo.

Mike Nakis
fonte
1
"se algo pode ser feito usando CSS em vez de JavaScript, eu preferiria usar CSS, pois é menos complexo" ... Como você imagina? Ela realmente depende do que você está tentando fazer quanto à possibilidade ou não seria mais complexa em JS vs CSS ...
Kenneth
Como eu disse, um programa estável com controle de execução é imensamente mais complexo do que qualquer receita jamais será.
quer
por exemplo: acho muito mais complexo fazer menus suspensos em css, pois você precisa fazer tantos ajustes e adicionar muitos elementos html extras apenas para fazê-lo funcionar em navegadores normais e, em seguida, se você deseja que ele funcione em sistemas antigos ou antigos. navegadores dispersos (IE, etc) ainda mais. Com o javascript, são necessárias algumas linhas simples de código para animar e algumas linhas de css para estilizá-lo.
Kenneth
É claro que não é preciso dizer que "a discrição do programador é necessária". Se não puder ser feito em CSS, ou se não for aconselhável devido a incompatibilidades do navegador, o JavaScript deve ser preferido. Minha resposta é mais do lado acadêmico das coisas do que do lado pragmático.
quer
Pergunta rápida (apenas para esta resposta): O IE6 suporta a mesma versão do JavaScript que os navegadores modernos? - Com isso, pretendo abstrair as informações para não precisar me preocupar com os "padrões" específicos do navegador.
AT
1

Javascript é uma linguagem de script, o que significa que tem capacidade para adicionar alguma lógica. CSS é usado para descrever a aparência e o estilo de um documento. Ele foi projetado principalmente para separar a estrutura do documento da formatação e layout (apresentação).

Você pode usar o Javascript para modificar a aparência de uma página da Web, mas como o CSS foi feito para isso, eu usaria o CSS para o estilo do site e deixaria o restante para o Javascript.


Wikipedia:

Uso de Javascript:

  • Abrir ou abrir uma nova janela com controle programático sobre o tamanho, posição e atributos da nova janela (por exemplo, se os menus, barras de ferramentas etc.) estão visíveis.
  • Validando valores de entrada de um formulário da web para garantir que eles sejam aceitáveis ​​antes de serem enviados ao servidor.
  • Alterando imagens à medida que o cursor do mouse se move sobre elas: Esse efeito é frequentemente usado para chamar a atenção do usuário para links importantes exibidos como elementos gráficos.

ATUALIZAR. Quanto ao terceiro ponto, o W3C diz sobre CSS:

A :hoverpseudo-classe se aplica enquanto o usuário designa um elemento com um dispositivo apontador, mas não necessariamente o ativa. Por exemplo, um agente de usuário visual pode aplicar essa pseudo-classe quando o cursor (ponteiro do mouse) passa o mouse sobre uma caixa gerada pelo elemento.


Uso de CSS:

Antes do CSS, quase todos os atributos de apresentação dos documentos HTML estavam contidos na marcação HTML; todas as cores de fonte, estilos de plano de fundo, alinhamentos de elementos, bordas e tamanhos precisavam ser explicitamente descritos, muitas vezes repetidamente, dentro do HTML. O CSS permite que os autores movam muitas dessas informações para uma folha de estilos separada, resultando em uma marcação HTML consideravelmente mais simples.

pferor
fonte
1
"Alterando imagens à medida que o cursor do mouse se move sobre elas: esse efeito costuma ser usado para chamar a atenção do usuário para links importantes exibidos como elementos gráficos." - Isso não é um recurso do CSS?
AT
@AT Sim, você está certo (+1) e obrigado por trazer isso à tona. A hoverpseudo-classe tem esse propósito. Eu estava apenas citando. Editado.
Pferor