desenvolvimento para web - xhtml, css, padrões da web, usabilidade, acessibilidade, web design, SEO, blogs e tecnologias para desenvolver a web Développement web - xhtml, css, standards du Web, l'utilisabilité, l'accessibilité, web design, SEO, des blogs et de la technologie pour développer le web

Principalmente quando no início dos estudos sobre desenvolvimento para web , é comum haver confusões entre IDs e Classes, tão utilizados e necessários em XHTML, CSS e Javascript. Surtout quand, au début des études sur le développement pour le Web, il est commun de confusion entre les classes et des identifiants et utilisés selon les besoins en XHTML, CSS et Javascript. Vários tutoriais na internet explicam alguns pontos básicos e dão certas orientações, mas nada muito aprofundado e esclarecedor. Plusieurs tutoriels sur l'Internet expliquer certains points fondamentaux et fournir des orientations, mais rien de très complet et éclairant. O resultado: as dúvidas persistem ea diferença entre ID e Classe ainda não é “desvendada”. Le résultat: les doutes persistent et que la différence entre ID et la classe n'est pas encore "desvendada." Com este artigo este “mistério” chega ao fim! Dans cet article, ce «mystère» à la fin! ;-)

IDs e classes são “anzóis” Identifiants et les classes sont des "crochets"

Precisamos de formas de descrever conteúdos em documentos HTML / XHTML. Nous avons besoin de moyens pour décrire le contenu dans les documents HTML / XHTML. Os elementos básicos como <h1>, <p> e <ul> frequentemente fazer o trabalho, mas o conjunto básico de tags não abragen todas as possibilidades de elementos de página ou escolhas de layout . Les éléments de base comme <h1>, <p> <ul> et souvent faire le travail, mais la configuration de base de balises abragen pas toutes les possibilités d'éléments ou de mise en page de choix. Para isso, precisamos de IDs e Classes . Pour cela, nous avons besoin d'identifiants et des classes.

Por exemplo <ul id=”nav”>, isso dá a oportunidade de visar especificamente esta lista, então há uma maneira de manipular esta lista exclusivamente em relação a outras listas não-ordenadas da página. <ul Id="nav"> Par exemple, il donne une occasion de cibler cette liste, il est un moyen de manipuler cette liste seulement en ce qui concerne les autres listes ordonnées de la page. Ou talvez tivéssemos uma seção na página que não possui uma tag relevante para signifcar, por exemplo, um rodapé, onde poderíamos fazer algo como <div id=”footer”>. Ou nous pourrions avoir une section sur la page qui n'a pas de pertinence signifcar tag, par exemple, une note de bas de page, où nous pourrions faire quelque chose comme <div id="footer">. Ou talvez tenhamos boxes na barra lateral para manter o conteúdo separado de alguma forma: <div class=”sidebar-box”>. Ou peut-être nous avons cases dans la barre latérale de la tenir séparer le contenu d'une certaine façon: <div class="sidebar-box">.

Esses IDs e classes são os “anzóis” que precisamos fazer na marcação para colocarmos as mãos neles. Ces identifiants et les classes sont les "crocs" nous devons faire dans le marquage de mettre leurs mains sur eux. CSS obviamente precisa disso para que possa fazer seletores e montar folhas de estilos, mas outras linguagens web , como javascript , também dependem deles. CSS évidemment besoin afin que vous puissiez faire monter de sélecteurs et de feuilles de styles, mais d'autres langues Web, javascript, également en dépendent. Mas quais as diferenças entre IDs e classes? Mais quelles sont les différences entre les identifiants et les classes?

IDs são únicos Sont des identifiants uniques

• Cada elemento pode ter apenas um ID; Chaque élément ne peut avoir un ID;
• Cada página pode ter apenas um elemento com aquele ID. Chaque page peut être seulement un élément de cette identité.

Quando se está aprendendo sobre isso, é comum ouvir que só se deve usar IDs uma vez, mas é possível usar uma classe várias vezes. Lorsque vous êtes en train d'apprendre à ce sujet, il est courant d'entendre que l'on ne devrait utiliser les identifiants une fois, mais vous pouvez utiliser une classe à plusieurs reprises. Basicamente, isso entra num ouvido e sai no outro, porque soa mais como uma “regrinha” que algo realmente importante. Fondamentalement, nous entrons dans une oreille et laissant les autres, parce que cela semble plus comme un "regrinha" que quelque chose de très important. Se você trata somente com HTML / CSS, isso pode acontecer com você, também, porque eles realmente não parecem fazer nada de diferente. Si vous ne traitent que de HTML / CSS, cela peut vous arriver aussi, parce que vraiment ils ne semblent pas faire quoi que ce soit différent.

Aqui vai uma: seu código não vai passar pelo validador se você usar o mesmo ID em mais de um elemento . Voici un vai: votre code vai pas passer à travers le validateur si vous utilisez le même ID sur plus d'un élément. Validação deve ser importante para todos nós, de modo que, por si só, é algo muito importante. La validation devrait être important pour nous tous, de sorte que, en soi, est quelque chose de très important. Adiante, mais razões pelas quais um ID deve ser único. À venir, plus de raisons pour lesquelles une pièce d'identité doit être unique.

Classes não são únicas Les cours ne sont pas uniques

• Você pode usar a mesma classe para vários elementos; Vous pouvez utiliser la même classe de plusieurs éléments;
• Você pode usar várias classes para um mesmo elemento . Vous pouvez utiliser plusieurs classes pour le même élément.

Qualquer informação de estilo que precise ser aplicada a múltiplos elementos em uma página deve ser feita com uma classe . Toute information de style qui doivent être appliquées à plusieurs éléments sur une page doit être fait avec une classe. Tomemos como uma exemplo uma página com vários “ widgets “: Prenons comme exemple une page avec plusieurs "widgets":

 <div class = "widget" > </div> <div class = "widget" > </div> <div class = "widget" > </div> <div class = "widget"> </ div> <div class = "widget"> </ div> <div class = "widget"> </ div> 

Agora, é possível usar a mesma classe “widget” como gancho para aplicar o mesmo conjunto de estilos para cada um deles. Maintenant, vous pouvez utiliser la même classe "widget" comme un crochet à appliquer le même ensemble de styles de chacun. Mas, e se for preciso ter um deles maior que os outros, mas continuar com um estilo que compartilhe dos outros atributos? Mais, si un besoin plus grand que l'autre, mais continuer avec un style que la part relative des autres attributs? É possível aplicar mais de uma classe a um elemento: Vous pouvez appliquer plus d'une classe à un élément:

 <div class = "widget" > </div> <div class = "widget big" > </div> <div class = "widget" > </div> <div class = "widget"> </ div> <div class = "widget big"> </ div> <div class = "widget"> </ div> 

Não há necessidade de fazer e nomear uma nova classe aqui, apenas colocar o nome da nova classe no atributo class , juntamente com o nome da classe que já está lá. Il n'est pas nécessaire de faire et nommer une nouvelle classe ici, il suffit de mettre le nom du nouvel attribut de classe dans la classe, ainsi que le nom de la classe qui est déjà là. As diferentes classes são delimitadas por espaços ea maioria dos navegadores permite quaisquer números delas (na verdade, é mais como milhares , o que é muito mais do que realmente é preciso). Les différentes classes sont limitées par l'espace et la plupart des navigateurs permettent un nombre quelconque d'entre eux (en fait, est plus comme des milliers, ce qui est beaucoup plus que ce qui est réellement nécessaire).

Não existem padrões de IDs e Classes em nenhum navegador Il ya des modèles des pièces d'identité et de classes dans tout navigateur

Colocar um nome de classe ou ID em um elemento, por padrão não faz nada a esse elemento. Mettre un nom ou d'un ID de classe dans un élément, par défaut ne fait rien de cet élément.

Isso é algo que intriga quem é iniciante. C'est quelque chose que l'intrigue qui est débutant. Você está trabalhando em um site e descobre que a aplicação de uma classe com um nome em particular resolve um problema que você tem. Vous travaillez sur un site et que la demande d'une classe avec un nom en particulier résout un problème que vous avez. Então você mexe em outro site , com o mesmo problema, e tenta corrigí-lo da mesma maneira, usando aquele mesmo nome de classe, pensando que o nome da classe, por si só, tem alguma propriedade mágica, apenas para descobrir que não funciona assim… Puis vous passez à un autre site, avec le même problème, et tente de fixer la même façon, en utilisant le même nom, la classe, en pensant que le nom de la classe par elle-même, certains biens magique, pour découvrir que ne fonctionne pas bien…

Classes e IDs não têm qualquer estilo por si mesmos. Les classes et les identifiants n'ont pas de style pour eux-mêmes. É preciso CSS para orientar e aplicar estilos. Nous avons besoin pour orienter et appliquer les styles CSS.

Códigos de Barra e Números de Série Codes de Barra et des numéros de série

Talvez códigos de barra e números de série sejam uma boa analogia. Peut-être les codes à barres et les numéros de série sont une bonne analogie. Tome um iPod, numa loja. Prendre un iPod, dans un magasin. Na embalagem há um código de barras. Dans le pack il est un code-barres. Ele indica à loja que produto é esse; então, quando é escaneado, o código de barras informa exatamente que produto é aquele e quanto custa. Il fait au magasin que ce produit est, en quelque sorte lorsqu'il est scanné, le code-barres que l'information est exactement ce produit et le coût. É possível saber até sua cor e em qual lugar do armazém ele era mantido. Vous pouvez apprendre par leur couleur et l'emplacement de l'entrepôt dans lequel il a été retenu. Todos esses iPods têm exatamente o mesmo tipo de código de barras. Tous les iPods ont exactement le même type de code-barres.

O iPod tem também um número de série que é absolutamente único em relação a qualquer outro iPod (ou outro dispositivo) em todo o mundo. L'iPod a également un numéro de série est absolument unique en son genre en ce qui concerne toute autre iPod (ou autre dispositif) à travers le monde. O número de série não informa o preço. Le numéro de série n'est pas informé le prix. Poderia, mas para a loja que o vende esta não seria uma maneira eficaz de armazenar e utilizar essa informação. Il pourrait, mais pour le magasin qui vend ce ne serait pas un moyen efficace de stocker et utiliser cette information. É muito mais fácil usar um código de barras porque se, por exemplo, o preço muda, é preciso apenas alterar o preço para aquele código de barras, e não para cada número serial do sistema. Il est beaucoup plus facile à utiliser un code à barres parce que si, par exemple, les variations de prix, il suffit de modifier le prix de ce bar-code, pas le numéro de série pour chaque système.

Isso é muito parecido com IDs e Classes. Informações que são reusadas devem ser mantidas em uma classe e informações que são totalmente únicas devem ser mantidas em um ID. Ceci est très similaire à des identifiants et des classes. Reusadas information nous voulons être conservés dans une classe et d'information qui sont complètement unique en son genre à être maintenu dans un identifiant.

IDs têm uma funcionalidade especial nos navegadores ID sont une particularité dans les navigateurs

Classes não tem funcionalidades especiais no browser , mas IDs têm um truque muito especial na manga: um “valor de hash ” para URLs. Se você tiver um URL como http://seudominio.com#comments, o navegador vai tentar localizar o elemento com o id “comments” e vai automaticamente rolar a página até chegar nesse elemento. Les classes n'ont pas de caractéristiques particulières dans le navigateur, mais les identifiants ont une très spécial tour dans son sac: une "valeur de hachage", pour les URL Si vous avez une URL comme http://seudominio.com # de commentaires, le navigateur va essayer de trouver l'élément dont l'ID est "commentaires" et va automatiquement faire défiler la page jusqu'à ce que vous obtenez cet élément.

É importante observar que o browser vai rolar a página até onde quer que o elemento esteja; então, se houver algo de especial, como uma DIV com barra de rolagem (propriedade CSS overflow com valor “auto” ou “scroll”), esta barra de rolagem vai ser deslocada - rolar para baixo -, também. Il est important de noter que le navigateur va faire défiler la page sur laquelle vous voulez que l'élément est, si il ya quelque chose de spécial, comme une barre de défilement avec DIV (CSS dépassement de la valeur de la propriété par "auto" ou "scroll"), ce bar va être déplacé pour faire défiler - défiler vers le bas - trop.

Esta é uma razão importante sobre o porquê é importante ter um ID absolutamente único. C'est une raison importante sur les raisons pour lesquelles il est important d'avoir une identité absolument unique en son genre. Com isso, o navegador sabe até quando rolar. Avec cela, le navigateur sait quand à rouler.

Elementos podem ter ambos, ID e Classes Les éléments peuvent avoir deux, ID et classes

Nada para você quando você usa ambos, ID e classes em um único elemento. Rien pour vous lorsque vous utilisez les deux, ID et les classes en un seul élément. Na verdade, fazer isso na maioria das vezes é uma boa idéia. En effet, et ce dans la plupart des cas est une bonne idée. Tomemos como exemplo o padrão de marcação para item de lista de um comentário no Wordpress: Prenons, par exemple, le modèle de marquage pour une liste des questions à formuler des observations sur Wordpress:

 <li id = "comment-27299" class = "item" > <li id = "comment-27299" class = "item"> 

Tem uma classe que foi aplicada que talvez se queira usar para estilizar todos os comentários na página, mas também há um único valor de ID (dinamicamente gerado pelo Wordpress). Il a une classe qui a été appliqué peut-être que vous voulez utiliser pour estilizar tous les commentaires sur la page, mais il est une valeur unique d'identité (générées dynamiquement par Wordpress). Com isso, é facilmente possível fazer um link diretamente a um comentário, em uma página, em especial. Cela est facilement possible de faire un lien vers un commentaire sur une page en particulier.

CSS não se importa CSS ne pas l'esprit

Quanto ao CSS, não há nada que você possa fazer com um ID que não possa fazer com uma Classe e vice-versa . Sur la CSS, il n'ya rien que vous pouvez faire avec un compte qui ne peuvent pas faire avec une classe et vice-versa. Às vezes, quando se está iniciando no estudo de CSS e se tem um problema, tenta-se alternar entre usar ID ou usar Classe. Parfois, au démarrage de l'étude de CSS et vous avez un problème, essaie de passer entre l'utilisation ou l'utilisation ID classe. O CSS não se importa. Le CSS ne pas l'esprit.

Javascript se importa Javascript est important

Aqueles que mexem com javascript provavelmente já estão mais em sintonia entre as diferenças entre as Classes e IDs. Javascript depende da existência de um elemento de página com ID único, ou então a comumente utilizada função getElementById não seria confiável. Ceux qui se déplace avec javascript sont probablement déjà plus en ligne de démarcation entre les différences entre les classes et les identifiants. Javascript dépend de l'existence d'un élément de page avec identifiant unique, ou la fonction couramment utilisé getElementById ne serait pas fiable. Aqueles acostumados com jQuery sabem o quão fácil é adicionar e remover classes de elementos de página. Ces habitués à jQuery savoir comment facile d'ajouter et de supprimer les catégories d'éléments de la page. É uma função nativa no jQuery. Il s'agit d'une fonction native dans jQuery. Veja que tal função não existe para IDs. Voir à ce que cette fonction n'existe pas pour l'utilisateur. Não é responsabilidade do javascript manipular estes valores, porque ele causaria mais problemas que seria útil… Ce n'est pas la responsabilité de javascript manipuler ces valeurs, car cela risque de créer plus de problèmes qu'il serait utile…

Se você não precisa deles, não os use Si vous n'avez pas besoin d'eux, de ne pas utiliser

Como você pode ver, classes e IDs são muito importantes e nós os utilizamos todos os dias para estilizar páginas e manipular aquilo que é preciso. Comme vous pouvez le voir, les classes et les identifiants sont très importantes et nous les utilisons tous les jours pour estilizar pages et de manipuler ce qui est nécessaire. Entretanto, você deve usá-los com critério e semanticamente. Cependant, vous devez les utiliser avec discrétion et sémantiquement.

Isto significa evitar coisas do tipo: Cela signifie éviter des choses comme:

 <a href = "http://css-tricks.com" class = "link" > CSS-Tricks.com </a> <a href = "http://css-tricks.com" class = "link"> CSS-Tricks.com </ a> 

Já sabemos: este elemento é um link , é um elemento âncora. Nous savons déjà: cet élément est un lien, est une ancre. Não há nada de especial aqui a ponto de ser preciso especificar uma classe, já que é possível aplicar o estilo na própria tag (”a”). Il n'ya rien de spécial ici doit être un point de spécifier une classe, dans la mesure où il est possible d'appliquer la balise dans leur propre style ( "a").

Evite este tipo de coisa, também: Éviter ce genre de choses, trop:

 <div id = "coluna-direita" > <div ID = "coluna-direita"> 

O ID é corretamente utilizado aqui, já que, provavelmente, a página terá somente uma única coluna da direita, mas o nome é inadequado. L'ID est utilisé correctement ici parce que, probablement, la page n'aura qu'une seule colonne de droite, mais le nom est inapproprié. Descreva o contexto do elemento, não onde está ou como se parece. Décrire le contexte de l'élément, pas où il est ou comment il semblerait. Um ID “barra-lateral” seria melhor. Un ID "bar-côté" serait préférable.

Microformatos são apenas nomes específicos de classes Microformatos ne sont que des noms de classes

Pensa que microformatos é difícil para você? Pensez-vous que les microformes est difficile pour vous? Microformato é apenas marcação regular que faz uso de nomes de classes padronizados para a informação que contêm. Microformato est tout marquage qui fait un usage régulier de la normalisation des noms de classes pour les informations qu'ils contiennent. Veja este vCard: Voir ce vCard:

 <div class = "vcard" > <a class = "fn org url" href = "http://www.commerce.net/" > CommerceNet </a> <div class = "adr" > <span class = "type" > Work </span> : <div class = "street-address" > 169 University Avenue </div> <span class = "locality" > Palo Alto </span> , <abbr class = "region" title = "California" > CA </abbr> <span class = "postal-code" > 94301 </span> <div class = "country-name" > USA </div> </div> <div class = "tel" > <span class = "type" > Work </span>  1-650-289-4040 </div> <div class = "tel" > <span class = "type" > Fax </span>  1-650-289-4041 </div> <div> Email: <span class = "email" > info@commerce.net </span> </div> </div> <div class = "vcard"> <a class = "fn org url" href = "http://www.commerce.net/"> CommerceNet </ a> <div class = "adr"> <span class = " type "> Work </ span>: <div "street-address" classe => 169, avenue University </ div> <span class = "locality"> Palo Alto </ span>, <class = abbr" région "title = "CA"> CA </ abbr> <span "postal-code"> class = 94301 </ span> <div class = "country-name"> États-Unis </ div> </ div> <div class = "tel" > <span Class = "type"> Work </ span>  1-650-289-4040 </ div> <div class = <span "tel"> class = "type"> Télécopieur </ span>  1- 650-289-4041 </ div> <div> Courrier électronique: class = <span "email"> info@commerce.net </ span> </ div> </ div>