2016-12-29
Animamos os botões e verificamos no site a validade do código HTML e CSS
Olá caro visitante!
Hoje, usando o exemplo de uma página web criada, veremos como você pode verificar a validade do site, ou seja, a conformidade com as especificações estabelecidas das linguagens HTML e CSS.
Além disso, antes de verificar, faremos alguns refinamentos da folha de estilo CSS em relação à "animação" dos botões da barra lateral, onde faremos botões interativos a partir de botões estáticos que mudam de aparência dependendo de seu estado - passivo, ativo e pressionado.
- Fazendo botões volumosos
- Tornando os botões interativos
- A validação é necessária?
- Como validar o código HTML
- Como validar o código CSS
- Arquivos de origem do site
Fazendo botões volumosos
No artigo anterior, projetamos a área de conteúdo principal para corresponder ao layout da página principal. Ao mesmo tempo, no momento, existem botões na barra lateral que são estáticos e parecem um retângulo marrom liso regular com cantos arredondados.
Abaixo está um fragmento de uma barra lateral com esses botões.
Para "animar" os botões, primeiro damos a eles algum volume usando estilos CSS. E faremos isso com a ajuda da propriedade gradiente linear, que foi usada anteriormente no design dos blocos rotador, pesquisa e assinatura.
Definimos os valores do gradiente linear da seguinte forma:
1. Tons de cores serão definidos de baixo para cima, começando com uma cor mais escura em comparação com a cor principal do botão. Para determinar qual cor usar no início do gradiente, usamos uma ferramenta de edição gráfica, neste caso o Photoshop.
Para fazer isso, com o documento de layout de design aberto, você precisa selecionar o "Color Picker", passar o mouse sobre a área desejada do botão, determinar a cor principal e usar as ferramentas "Color Pickers" para selecionar uma cor mais escura do mesmo tom marrom. No nosso caso, vamos pegar a cor com o valor "653939". Claramente, como isso pode ser feito é mostrado na captura de tela abaixo.
2. Em seguida, defina a posição de parada do gradiente onde a cor inicial mais escura irá para a principal. A posição de parada será colocada aproximadamente no meio. Ao mesmo tempo, para obter uma cor mais saturada, vamos mover um pouco a posição de parada e definir seu valor, digamos, 70% da altura.
3. E a última coisa a fazer para definir as propriedades do gradiente é definir uma cor mais clara em relação à principal, que colorirá os botões na parte superior. Isso é feito da mesma forma que ao determinar a cor inicial do gradiente. Neste caso, o valor desta cor será tomado como "b88686".
3. Com base nos dados recebidos, adicionaremos um gradiente linear às propriedades CSS dos botões previamente formadas.
entrada: {
altura :30px;
margem inferior :10px;
raio de borda :5px;
fundo :#a76d6d;
alinhamento de texto :Centro;
espessura da fonte :negrito;
cor :#ff;
flutuador :certo;
imagem de fundo
Pode-se notar que ao determinar as cores extremas, as posições de parada não são especificadas aqui, pois não é necessário fazer isso com valores de 0% e 100%.
Agora, vamos atualizar o navegador e ver o resultado.
Como você pode ver, os botões adquiriram uma leve protuberância. Agora você pode começar a "revivê-los".
Tornando os botões interativos
Para trabalhar totalmente com os botões, vamos torná-los interativos, que refletirão visualmente seus três estados principais, passivo (o botão está em seu estado inicial), ativo (o cursor passa sobre o botão) e pressionado (o mouse botão é pressionado e mantido enquanto o cursor está pairando).
E faremos isso usando uma combinação de propriedades de sombra e borda. A essência dessa técnica é que, alterando a cor da sombra e das bordas de diferentes lados, você pode obter uma imitação de uma mudança no estado dos botões.
Primeiro, vamos fazer isso para o estado passivo e tentar desenhá-lo para que o botão fique acima da superfície.
Selecionamos as cores das bordas e sombras da mesma maneira que nos casos anteriores.
O código CSS após as adições apropriadas tomará a forma.
entrada: {
altura :30px;
margem inferior :10px;
raio de borda :5px;
fundo :#a76d6d;
alinhamento de texto :Centro;
espessura da fonte :negrito;
cor :#ff;
flutuador :certo;
imagem de fundo :linear-gradient(para cima, #653939, #a76d6d 50%, #b88686);
Sombra da caixa :2px 2px 4px 0px #422a2a;
largura da borda :2px;
estilo de borda :sólido;
Cor da borda :#ddbebe #241616 #241616 #ddbebe;
Aqui você pode notar que as bordas são representadas por uma combinação de propriedades que determinam a espessura (largura da borda com o valor 2px), um estilo ( border-style ) com um valor que especifica uma borda sólida e cores ( border-color ) em cada um dos quatro lados.
Vamos atualizar o navegador e ver como os botões ficarão agora.
Como você pode ver, os botões neste estado parecem ter subido.
Agora vamos tentar dar aos botões a aparência de um estado pressionado. Para fazer isso, remova a sombra e altere a cor das bordas. Neste caso, usaremos um seletor especial de pseudo-classe :hover correspondente ao estado ativo.
O código CSS para o estado ativo dos botões terá o seguinte formato.
entrada: flutuar {
Sombra da caixa :Nenhum;
Cor da borda :#a76d6d #a76d6d #a76d6d #a76d6d;
Neste caso, vamos mudar a cor das bordas novamente e adicionar uma sombra, só que neste caso ela será interna e sem deslocamento. O seletor de pseudo-classe também mudará para :active , correspondente ao estado pressionado.
O código CSS para o estado pressionado seria o seguinte.
entrada: ativo {
Sombra da caixa :0px 0px 7px 2px #422a2a inserido;
Cor da borda :#777 #fff #fff #777;
O botão "Pesquisar" é mostrado abaixo para comparação, onde você pode ver claramente como ele muda sua aparência dependendo do estado.
Fig.8 Estado passivo
Foi aqui que finalizamos o layout da página principal e trouxemos uma aparência que combina com o layout do design. E agora devemos, como antes em cada estágio, verificar a conformidade cruzada em diferentes navegadores. Mas antes disso, vamos verificar a página para validação, já que o estado do código também pode afetar a consistência cruzada até certo ponto. Portanto, vamos agora realizar esta operação muito necessária.
A validação é necessária?
A validação é a verificação do código em relação aos padrões estabelecidos. Há validação para a correção do código HTML e CSS. É claro que em um caso, o código HTML é verificado, no outro, o código CSS.
Provavelmente, muitos acharão estranho perguntar se a validação é necessária. Mas se você olhar na Internet, verá que há muitos que acreditam que código válido é opcional, que isso é uma perda de tempo extra, pois os navegadores funcionam bem mesmo na presença de todos os tipos de erros.
É claro que, em muitos casos, os sites podem funcionar bem em códigos inválidos, mas a conformidade cruzada nesses casos não pode ser garantida. Afinal, existem padrões para as próprias linguagens de programação, mas pelo fato de os navegadores corrigirem erros da mesma maneira, é claro que não existe esse padrão e não pode existir. E, portanto, diferentes navegadores podem solucionar erros de maneiras diferentes, o que pode levar a uma exibição de página diferente.
E, em geral, não está claro por que algumas pessoas têm uma atitude tão fictícia em relação ao seu trabalho, de acordo com o princípio "e assim será". Portanto, se alguém acredita que não precisa verificar a validade do código, esse é o seu direito, e é improvável que ele possa ser convencido do contrário, e não há necessidade.
E agora vamos passar para a verificação direta da validade dos códigos, primeiro HTML, depois CSS.
Como validar o código HTML
Em essência, a verificação de validação de código em si é bastante simples, como podemos ver agora. Mas, aqui a eliminação de erros geralmente requer um certo tempo. Obviamente, se o código consiste em várias linhas, as dificuldades não podem surgir aqui. Mas, se houver centenas e milhares deles, talvez você precise trabalhar duro aqui, tudo depende de quão bem o código foi compilado. Portanto, é melhor fazer isso com mais frequência com uma verificação conjunta de conformidade cruzada.
Aqui consideramos a opção mais simples e comum para verificar a validade - é o uso do site "W3C Consortium", que, com o apoio de desenvolvedores de navegadores, desenvolve especificações para códigos de páginas da web.
Para validar o código HTML, basta acessar o link https://validator.w3.org/ , que abrirá uma página com um campo para inserir o endereço da página a ser validada.
captura de tela 51
Após clicar no botão "Verificar", obtemos o resultado da verificação.
Nesse caso, o código HTML é válido, mas há a recomendação de usar o atributo lang com o valor "ru" porque a página usa russo.
O atributo lang tem como objetivo fazer com que os navegadores exibam certos caracteres, como aspas, corretamente dependendo do idioma usado. Portanto, será útil incluí-lo no código HTML. E faremos isso na tag html para que esse atributo possa atuar em todo o documento.
Como fazer essa adição é mostrado na tabela a seguir.
"ru" >
. . .
E agora, se fizermos uma segunda verificação, podemos ver que o código se tornou completamente válido sem nenhum comentário.
Desta forma, verificamos o arquivo postado na Internet. Mas quando a página ainda não foi postada na web, você pode verificar sua validade de outras maneiras, seja enviando um arquivo usando o botão de navegação ou usando o formulário para copiar diretamente o código HTML.
A captura de tela mostra a última opção, quando o código da página da web é copiado diretamente no formulário para verificação.
Após realizar a verificação, obtemos um resultado semelhante, e o código que está sendo verificado também será mostrado aqui. Caso sejam encontrados erros, eles serão destacados para simplificar a busca, o que simplifica muito o trabalho de eliminá-los.
Como validar o código CSS
Cobrimos a validação de código HTML. O código CSS é verificado exatamente na mesma ordem. Somente neste caso, você precisa usar outra página do validador, que para este caso está localizada em http://jigsaw.w3.org/css-validator/ .
Vamos abri-lo e, como da vez anterior, digite o endereço da página a ser verificada, após o que pressionamos o botão "Verificar".
O resultado dessa verificação é mostrado na captura de tela.
Como você pode ver, nosso código CSS está totalmente em conformidade com a especificação sem erros, o que é um bom resultado.
A ordem de outros métodos de validação para este caso coincide completamente com verificações semelhantes para código HTML. Portanto, não nos repetiremos aqui e encerraremos nossa revisão das verificações de validação.
Depois disso, verificaremos nossa página para imagens cruzadas e garantiremos que ela seja exibida da mesma forma em todos os navegadores, isso completará o layout da página principal do site.
E faremos isso logo após os feriados de Ano Novo.
E, em conclusão, podemos parabenizar a todos pelo próximo Ano Novo! E desejo no Ano Novo saúde, amor, alegria, prosperidade e, claro, muito sucesso na criação de seu próprio site para a possibilidade de um trabalho bem-sucedido na Internet!
Arquivos de origem do site
Os arquivos fonte do site com as atualizações que foram feitas neste artigo podem ser baixados do anexo materiais adicionais.
Em um dos meus artigos anteriores, falei sobre . No entanto, nem todos sabem que, além de validador para HTML, comer validador e para CSS.
Significado Validade CSS igual ao HTML: quase irrelevante. Mesmo com HTML se você escrever CSS inválido, então não haverá problemas (a menos, é claro, que haja erros grosseiros), no entanto, um código válido é sempre bom. Esse código é claro e estruturado, é de fácil compreensão, o que também é importante, principalmente quando corrigido, e principalmente por outras pessoas. Também Validade CSS acelera o processo de processamento e, consequentemente, a velocidade de carregamento da página.
E, finalmente, em vista da observância geralmente rara de validade, um código válido sempre impõe respeito, o que é importante se você estiver fazendo isso profissionalmente.
Para verifique a validade do CSS, você tem que usar isso serviço W3: http://jigsaw.w3.org/css-validator/ .
Direi logo que, ao contrário HTML, Faz CSS válido muito mais fácil, já que na maioria das vezes há apenas erros grosseiros, com exceção dos quais devem ser evitados por completo.
Deixe-me resumir. Tornar o código válido não é de todo necessário, mas recomendo fortemente fazer isso, pois esse site será mais fácil de indexar pelos mecanismos de pesquisa ( Validade HTML), trabalhe mais rápido, seja mais fácil de editar e ganhe o respeito dos profissionais.
Ultimamente tenho recebido algumas perguntas de usuários sobre a validade dos meus temas e validação em geral. Neste post quero respondê-las.
O que é validade?
Acredita-se que a validade do código é uma característica única e universal de qualquer código.
Na verdade, validade é a conformidade do código html do documento com um determinado conjunto de regras especificadas no doctype ou implícitas no HTML5.
Ou seja, validade é um conceito relativo, pois as regras são diferentes, e seus requisitos também.
Para deixar mais claro, vou dar um exemplo que encontrei no site css-live.ru:
Diferentes SNiPs (códigos e regulamentos de construção) se aplicam à construção de edifícios residenciais e usinas nucleares, portanto, um documento válido de acordo com um conjunto de regras pode não ser válido de acordo com outro (uma usina nuclear construída de acordo com os padrões de um edifício residencial seria bom!).
O doctype geralmente aponta para o documento contra o qual a validação html é planejada, mas pode ser escolhido por razões pragmáticas para selecionar o modo ideal de navegadores.
XHTML5 pode não ter um doctype, mas ser válido.
Validação - o que é?
Em termos simples, a validação é o processo de verificar o código e torná-lo conforme o doctype escolhido (DTD).
Como é verificada a validade?
A validade do código HTML é verificada por uma ferramenta chamada validador.
O validador w3c mais famoso é https://www.w3.org.
O validador w3c executa várias verificações de código.
Os principais:
- Verifique se há erros de sintaxe:
Exemplo de habrahabr.ru/post/101985 :é a sintaxe correta, embora é uma tag HTML inválida
Portanto, a verificação de sintaxe é minimamente útil para escrever um bom código HTML. - Verificação de aninhamento de tags:
Em um documento HTML, as tags devem ser fechadas na ordem inversa de sua abertura. Essa verificação detecta tags não fechadas ou fechadas incorretamente. - Validação HTML de acordo com DTD:
Verificando como o código corresponde ao DTD - Document Type Definition (doctype) especificado. Inclui a verificação de nomes de tags, atributos e tags de "incorporação" (tags de um tipo dentro de tags de outro tipo). - Verificação de elementos estranhos:
Ele encontrará tudo o que está no código, mas não no doctype.
Por exemplo, tags e atributos personalizados.
Para verificar a validade do código CSS, existe um validador de CSS - http://jigsaw.w3.org/css-validator.
Validade do código- este é o resultado de uma verificação mecânica para a ausência de OB formal, de acordo com o conjunto de regras especificado.
Você precisa entender que a validação é uma ferramenta, não um valor em si.
Designers de layout experientes geralmente sabem onde é possível violar as regras de validação HTML ou CSS, e onde não, e o que ameaça (ou não ameaça) este ou aquele erro de validação.
Exemplos de quando um site não faz um código válido:
- mais conveniente e rápido - atributos personalizados para Javascript/AJAX ou
- SEO otimizado - marcação ARIA.
É claro que não há nenhum ponto na validade por uma questão de validade.
Como regra, designers de layout experientes seguem as seguintes regras:
- Não deve haver erros grosseiros no código.
- Os menores podem ser tolerados, mas apenas por motivos justificados.
Em relação aos erros de validação html/CSS:
Os erros de validação (VFs) podem ser divididos em grupos:
- OV em arquivos de modelo:
Eles não são difíceis de encontrar e corrigir.
Se algum dos pequenos erros ajudar a tornar o site mais funcional ou mais rápido, eles podem ser deixados. - OV em scripts de terceiros conectados no site:
Por exemplo, um widget Vkontakte, um script do Twitter ou arquivos de vídeo do YouTube.
Não há como corrigi-los, pois esses arquivos e scripts estão localizados em outros sites e não temos acesso a eles. - Regras CSS que o validador não entende:
O validador verifica se o código do site corresponde a uma versão específica de HTML ou CSS.
Se você usou regras CSS versão 3 no modelo e o validador verificar a versão 2.1, ele considerará todas as regras CSS3 como erros, embora não sejam. - OV, que involuntariamente devem ser deixados no site para obter o resultado desejado. Por exemplo:
- tags sem índice. Eles não são válidos, mas são muito necessários e temos que aturar isso.
- cáqui. Para obter a exibição correta do site em alguns navegadores, às vezes é preciso usar hacks - código que apenas um determinado navegador entende.
- Erros do validador.
Muitas vezes ele não vê nenhuma tag (por exemplo, as de fechamento) e relata sobre o OB onde ele não existe.
Acontece que em um local de trabalho quase sempre haverá algum tipo de OV.
Além disso, pode haver muitos deles.
Por exemplo, as páginas principais do Google, Yandex e mail.ru contêm várias dezenas de erros.
Mas, eles não interrompem a exibição de sites nos navegadores e não interferem em seu trabalho.
Tudo escrito acima se aplica aos meus tópicos.
Os tópicos complexos incluem:
- Recursos do WordPress (ex. the_category()), que dão um código inválido.
- Saída de vídeo de sites de hospedagem de vídeo, por exemplo, do YouTube, e há muitos OBs no código do YouTube, que nem você nem eu podemos influenciar.
- Botões de redes sociais que estão conectados usando os scripts dessas redes e contêm OB.
- Regras CSS3 e HTML5 consideradas bugs por validadores de versões mais antigas.
Ao mesmo tempo, os validadores das versões CSS3 e HTML5 consideram as regras antigas como erros :). - Às vezes, para obter a exibição correta no navegador Internet Explorer ou em versões mais antigas de outros navegadores, você precisa usar os chamados hacks - código que apenas um navegador específico entende para escrever regras de exibição do site para esse navegador específico.
Como resultado, você pode obter um código completamente válido apenas ao apresentar tópicos muito simples, ou seja, aqueles que contêm a quantidade mínima de funcionalidade.
Depois de terminar o layout de qualquer um dos meus tópicos, sempre verifico com um validador e corrijo todos os OB que podem ser corrigidos sem perder o desempenho do tema.
Ou seja, se houver uma escolha entre uma funcionalidade de trabalho e validade, eu escolho a funcionalidade.
Se você criar seus próprios temas, aconselho a fazer o mesmo.
Do meu ponto de vista (e também do ponto de vista da maioria dos designers de layout), a atitude em relação à validação html/CSS como a verdade suprema está errada. É obrigatório corrigir apenas os OBs que:
- impedir que o navegador exiba corretamente a página (tags não fechadas e aninhadas incorretamente).
- retardar o carregamento da página (scripts conectados incorretamente).
- pode ser corrigido sem quebrar a funcionalidade do tema.
Espero ter respondido a todas as suas perguntas sobre validação.
Já mencionei o que existe em termos de validade do código html. Isso deve ser feito pelo menos de vez em quando, porque validade tanto html quanto css afeta fortemente o site, ou seja, a exibição idêntica do seu recurso em diferentes navegadores (um artigo geral sobre navegadores populares e melhores, que espero ajudá-lo a escolher um deles).
Além disso, já mencionei que, apesar do fato de os mecanismos de pesquisa nesta fase não levarem em consideração erros de código CSS e HTML ao classificar sites, no futuro tudo pode mudar e você pode obter uma situação em que um projeto muito bem projetado, feito para pessoas, pode perder parte do público potencial devido ao fato de não ter passado na validação. Bem, é tudo letra, aqui cada um decide por si mesmo o quão importante tudo é.
Acho que você já conhece minha opinião, já que estou escrevendo este artigo, o que significa que considero digno de atenção junto com, por exemplo, uma parte tão importante da otimização de seo como fechar links e fragmentos de texto da indexação do Google e Yandex ou uso competente.
Ok, como eles dizem, mais ao ponto. Primeiro, um pouco sobre CSS. css( Folhas de estilo em cascata- Cascading Style Sheets) é uma linguagem de estilo que define a exibição de documentos HTML. Ou seja, se o HTML descreve o conteúdo da página, o CSS formata esse conteúdo, ou seja, dá uma aparência completa. A propósito, para aumentar a velocidade do site, será útil deslizar seus arquivos de tema.
Validador W3C: Verificando a validade do código CSS
Agora vamos ver como verificar a validade de um documento (páginas do nosso site ou blog WordPress). Assim como no caso de verificar o código HTML, usaremos um dos arquivos . Vamos ao serviço de validação CSS:
Como você pode ver, existem três maneiras de validar CSS com o validador W3C. A propósito, observe que na parte inferior da página do validador há uma nota que indica a necessidade de verificar a validade do código HTML. Apenas os dois códigos corretos garantem a exatidão de todo o documento. Digite o URL para verificar. Por exemplo, vamos verificar a página principal do meu blog:
O resultado da verificação do validador do W3C para erros de código CSS não pode ser considerado decepcionante, pois apenas 2 erros foram encontrados. Claro, esses erros são diferentes, em cada caso eles causam consequências diferentes. Vamos ver o que podemos fazer para eliminá-los. Tudo é conveniente aqui, pois o validador W3C fornece não apenas um link para um documento contendo código incorreto, mas também o número da linha em que está localizado. A propósito, abaixo, após a lista de avisos e erros, será exibida uma variante do código CSS correto, que você pode usar:
Há um link para o documento na página de resultados de validação CSS css.ie, que está localizado na pasta do tema. Ele foi criado para alcançar um blog cross-browser (a mesma exibição em navegadores populares). Além disso, é para várias modificações do Internet Explorer, que peca com várias “ombreiras” em termos de distorcer a aparência do site, principalmente suas versões mais antigas (o IE9 é muito melhor nesse aspecto). A compatibilidade entre navegadores é muito importante para o andamento do projeto, no entanto, após a inspeção, descobriu-se que este documento contém propriedades que não atendem aos padrões W3C.
Assim, obtemos as linhas 3 e 12, que contêm erros. Para corrigi-los, remova o erro de análise html (filtro: expressão(document.execCommand("BackgroundImageCache", false, true));) e propriedade .ampliação. Agora não vou entrar nos meandros da programação e layout dos sites, vou apenas observar que a propriedade expressão ajuda a se livrar do irritante efeito de cintilação da imagem de fundo que ocorre no IE6.
Ou seja, no navegador, cujo uso não dá em nada e nas versões subsequentes dessa “falha” não é mais observada. Devo dizer desde já que ainda usarei essa “cura” por algum tempo, até que o número de potenciais visitantes usando o IE6 atinja um nível mínimo. No entanto, para maior clareza, para mostrar como o validador do W3C reagirá a isso, vou removê-lo.
A propriedade.zoom, que define o fator de escala de um elemento, não faz parte do W3C International Standard e é suportada por versões muito antigas dos navegadores Opera, Safari, incluindo IE8(A versão 9 é quase completamente “cumpridora da lei”, portanto, em breve, espero, os webmasters serão liberados da necessidade de usar hacks, ou seja, códigos adicionais para obter a máxima compatibilidade entre navegadores). Agora vamos olhar para o documento que contém elementos inválidos e corrigi-lo:
Este documento está na minha pasta do tema Cloudy, estou excluindo os itens acima que não passaram na verificação de validação. Além disso, nos resultados da verificação de validade, além dos erros, também havia muitos chamados avisos:
Por exemplo, tentarei mostrar claramente como se livrar dos mais comuns e, ao longo do caminho, explicar seus significados. Como você pode ver, o validador W3C avisa sobre a presença das mesmas cores para texto e plano de fundo. Devo dizer que isso é geralmente indesejável em qualquer caso, uma vez que os motores de busca podem considerar este estado de coisas como uma ocultação de informações, que está repleta de sérias sanções.
Claro, isso nem sempre é o caso, mas esse perigo não deve ser subestimado. Então, vamos passar para corrigir a situação. É melhor copiar o arquivo estilo.css seu tema em HTML e PHP, o editor notepad++ que falei facilita a busca por número de linha:
Agora que sabemos onde essas linhas estão localizadas no seu arquivo de tema, corrigimos a cor alterando levemente o matiz. No sistema de cores hexadecimal, #ffffff corresponde ao branco. Nós o alteramos da seguinte forma: em vez do último f, inserimos d, obtendo assim um tom de branco ligeiramente diferente; agora as mudanças não serão perceptíveis para os usuários, mas os mecanismos de pesquisa verão a diferença:
É assim que você pode corrigir partes inválidas do código CSS de suas páginas de recursos. Da mesma forma, encontramos o resto das seções marcadas com avisos e que precisam ser corrigidas, quanto aos avisos referentes à linha 483 (aliás, foram bastantes, cerca de 10). Ao verificar, descobri que a causa é o plugin WP Page Numbers, que fornece paginação.
Isso me levou a desativar este plugin e foi a razão pela qual eu finalmente o substituí por injeção de código, que foi um passo para reduzir a carga do servidor. Assim que fiz isso, os avisos sobre a violação da validade do código por este plugin específico desapareceram imediatamente após a nova verificação. Após os gestos acima, verificamos novamente a validade do CSS usando o validador W3C:
Agora você sabe como verificar a validade de um documento CSS (página da web de um site ou blog) usando o validador W3C. Em conclusão, gostaria de observar que cada um decide por si mesmo o grau e a frequência de verificação da validade do código CSS, tudo depende das circunstâncias, mas, no entanto, de vez em quando isso deve ser feito, na minha profunda convicção. Assine as atualizações do blog para receber novos materiais por e-mail. Portanto, permita-me me despedir, espero que nos separemos por um tempo.
A validação refere-se à verificação do código CSS em relação à especificação CSS2.1 ou CSS3. Assim, um código correto que não contém erros é chamado de válido, e um que não satisfaz a especificação é chamado de inválido. É mais conveniente verificar o código através do site http://jigsaw.w3.org/css-validator/, usando este serviço você pode especificar o endereço do documento, fazer upload de um arquivo ou verificar o texto digitado. Uma grande vantagem do serviço é o suporte dos idiomas russo e ucraniano.
Verificar URI
Esta guia permite especificar o endereço de uma página hospedada na Internet. O protocolo http:// pode ser omitido, ele será adicionado automaticamente (Fig. 1.42).
Arroz. 1,42. Verificação de documentos por endereço
Após inserir o endereço, clique no botão “Verificar” e uma das duas inscrições aparecerá: “Parabéns! Nenhum erro encontrado" em caso de sucesso ou "Infelizmente, encontramos os seguintes erros" em código inválido. As mensagens de erro ou aviso contêm um número de linha, um seletor e uma descrição do erro.
Verifique o arquivo carregado
Essa guia permite carregar um arquivo HTML ou CSS e verificar se há erros (Figura 1.43).
Arroz. 1,43. Verificando um arquivo ao carregá-lo
O serviço reconhece automaticamente o tipo de arquivo e, se um documento HTML for especificado, extrai o estilo dele para validação.
Verifique o texto digitado
A última aba é para entrada direta de código HTML ou CSS, e apenas o estilo será verificado (Fig. 1.44).
Arroz. 1,44. Verificando o código inserido
Esta opção parece ser a mais conveniente para realizar vários experimentos no código ou verificar rapidamente pequenos fragmentos.
Seleção de versão CSS
O CSS3 tem muitas novas propriedades de estilo em comparação com a versão anterior, portanto, a revisão de código deve ser específica da versão. Por padrão, o serviço especifica CSS2.1, portanto, se você deseja verificar seu código em relação ao CSS3, deve especificá-lo explicitamente. Para fazer isso, clique no texto "Recursos adicionais" e no bloco que se abre, na lista "Perfil", selecione CSS3
Arroz. 1,45. Especificando a versão CSS a ser verificada
Identificadores e classes
Periodicamente, surge uma disputa sobre a conveniência do uso de identificadores no layout. O argumento principal é que os identificadores servem para acessar e manipular os elementos da página da web usando scripts, e somente classes devem ser usadas para alterar os estilos dos elementos. Na realidade, não importa quais estilos são usados, mas você deve estar ciente de alguns recursos de identificadores e classes, bem como das armadilhas que os desenvolvedores podem esperar.
Para começar, listamos as características desses seletores.
Identificadores
No código do documento, cada identificador é único e deve ser incluído apenas uma vez.
O nome do identificador diferencia maiúsculas de minúsculas.
Através do método getElementById, você pode acessar um elemento pelo seu ID e alterar as propriedades do elemento.
O estilo de um identificador tem precedência sobre as classes.
As classes podem ser usadas várias vezes no código.
Os nomes de classe diferenciam maiúsculas de minúsculas.
As classes podem ser combinadas entre si adicionando várias classes a uma tag.
Identificadores
Se você quiser alterar o estilo de alguns elementos rapidamente ou exibir algum texto dentro deles enquanto a página da Web estiver em execução, isso é muito mais fácil com identificadores. O elemento é acessado através do método getElementById, cujo parâmetro é o nome do identificador. O Exemplo 1-70 adiciona um identificador chamado userName a um campo de texto de formulário e, em seguida, usa uma função JavaScript para verificar se o usuário digitou algum texto no campo. Se não houver texto, mas o botão Enviar for clicado, uma mensagem será exibida dentro da tag com o ID msg . Se tudo estiver correto, os dados do formulário são enviados para o endereço especificado pelo atributo action.
Exemplo 1.70. Validação de dados do formulário XHTML 1.0 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6
