desenvolvimento para web - xhtml, css, padrões da web, usabilidade, acessibilidade, web design, SEO, blogs e tecnologias para desenvolver a web In via di sviluppo web - XHTML, CSS, standard web, usabilità, l'accessibilità, web design, SEO, blog e della tecnologia per sviluppare il 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. Soprattutto quando nei primi studi in materia di sviluppo per il web, non vi è comune confusione tra le classi e gli ID, e utilizzato come necessario in XHTML, CSS e Javascript. Vários tutoriais na internet explicam alguns pontos básicos e dão certas orientações, mas nada muito aprofundado e esclarecedor. Diversi tutorial su Internet spiegare alcuni punti fondamentali e fornire alcune linee guida, ma non molto spinto e illuminante. O resultado: as dúvidas persistem ea diferença entre ID e Classe ainda não é “desvendada”. Il risultato: i dubbi persistono e la differenza tra l'ID e la classe non è ancora "desvendada". Com este artigo este “mistério” chega ao fim! In questo articolo questo "mistero" giunge al termine! ;-)

IDs e classes são “anzóis” ID e le classi sono "ganci"

Precisamos de formas de descrever conteúdos em documentos HTML / XHTML. Abbiamo bisogno di modi per descrivere il contenuto in documenti 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 . Gli elementi di base come <h1>, <p> <ul> e spesso fare il lavoro, ma la base serie di tag non abragen tutte le possibilità di elementi o layout di pagina di scelte. Para isso, precisamos de IDs e Classes . Per questo, abbiamo bisogno di ID e classi.

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">, ad esempio, dà l'opportunità di targeting per questa lista, allora vi è un modo per manipolare questo elenco solo per quanto riguarda gli altri non ordine elenchi di pagina. 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”>. O si potrebbe avere una sezione sulla pagina che non ha alcuna rilevanza signifcar etichetta, per esempio, una nota a piè pagina, dove si potrebbe fare qualcosa di simile <div id="footer">. Ou talvez tenhamos boxes na barra lateral para manter o conteúdo separado de alguma forma: <div class=”sidebar-box”>. O forse abbiamo caselle nella barra laterale di tenere separato il contenuto in qualche modo: <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. Questi ID e le classi sono i "ganci" dobbiamo fare in marcatura a mettere le mani su di loro. 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, ovviamente, ne hanno bisogno in modo che tu possa fare selettori e montare fogli di stile, ma altri linguaggi web, come javascript, dipendono anche da loro. Mas quais as diferenças entre IDs e classes? Ma quali sono le differenze tra gli ID e le classi?

IDs são únicos Gli ID sono unici

• Cada elemento pode ter apenas um ID; Ogni elemento può avere solo un ID;
• Cada página pode ter apenas um elemento com aquele ID. Ogni pagina può essere solo un elemento che con ID.

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. Quando sei di apprendimento su di esso, è comune sentire che si dovrebbe usare solo gli ID di una volta, ma si può usare una classe più volte. Basicamente, isso entra num ouvido e sai no outro, porque soa mais como uma “regrinha” que algo realmente importante. In sostanza, si entra un orecchio e lasciando gli altri, perché suona più come un "regrinha" che qualcosa di veramente importante. Se você trata somente com HTML / CSS, isso pode acontecer com você, também, porque eles realmente não parecem fazer nada de diferente. Se si trattano solo con HTML / CSS, questo può accadere a te, troppo, perché davvero non sembrano fare niente di diverso.

Aqui vai uma: seu código não vai passar pelo validador se você usar o mesmo ID em mais de um elemento . Vai qui uno: il tuo codice vai non passare attraverso il validatore se si utilizza lo stesso ID a più di un elemento. Validação deve ser importante para todos nós, de modo que, por si só, é algo muito importante. Convalida dovrebbe essere importante per tutti noi, in modo che in sé è qualcosa di molto importante. Adiante, mais razões pelas quais um ID deve ser único. Avanti, più motivi per cui un ID deve essere unico.

Classes não são únicas Le classi non sono uniche

• Você pode usar a mesma classe para vários elementos; È possibile utilizzare la stessa classe per diversi elementi;
• Você pode usar várias classes para um mesmo elemento . È possibile utilizzare diverse classi per lo stesso elemento.

Qualquer informação de estilo que precise ser aplicada a múltiplos elementos em uma página deve ser feita com uma classe . Tutte le informazioni di stile che deve essere applicato a più elementi in una pagina dovrebbe essere fatto con una classe. Tomemos como uma exemplo uma página com vários “ widgets “: Prendete come esempio una pagina con diversi "widget":

 < 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. Adesso, è possibile utilizzare la stessa classe "widget" come un gancio di applicare lo stesso insieme di stili per ciascuno di essi. Mas, e se for preciso ter um deles maior que os outros, mas continuar com um estilo que compartilhe dos outros atributos? Ma, se necessario, uno più grande di altri, ma continuare con uno stile che parti di altri attributi? É possível aplicar mais de uma classe a um elemento: È possibile applicare più di una classe di un elemento:

 < 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á. Non vi è alcun bisogno di fare e di nominare una nuova classe qui, appena messo il nome del nuovo attributo di classe in classe, insieme con il nome della classe che è già 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). Le diverse classi sono delimitate da uno spazio e la maggior parte dei browser consente un numero qualsiasi di essi (in realtà, è più simile a migliaia, che è molto più di quanto sia effettivamente necessario).

Não existem padrões de IDs e Classes em nenhum navegador Ci sono modelli di ID e le classi con qualsiasi browser

Colocar um nome de classe ou ID em um elemento, por padrão não faz nada a esse elemento. Mettere un nome, o ID di classe in un elemento, per impostazione predefinita non fa nulla di tale elemento.

Isso é algo que intriga quem é iniciante. Questo è qualcosa che intrigo che è principiante. 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. Si lavora su un sito e scoperto che l'applicazione di una classe con un nome in particolare, risolve un problema che avete. 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… Poi si sposta in un altro sito, con lo stesso problema, e cerca di risolvere il problema allo stesso modo, usando lo stesso nome, classe, pensando che il nome della classe di sé, ha alcune proprietà magiche, solo per scoprire che non funziona bene…

Classes e IDs não têm qualquer estilo por si mesmos. Le classi e gli ID non hanno alcun stile per se stessi. É preciso CSS para orientar e aplicar estilos. Abbiamo bisogno di guida e applicare stili CSS.

Códigos de Barra e Números de Série Barra di codici e numeri di serie

Talvez códigos de barra e números de série sejam uma boa analogia. Forse la codici a barre e numeri di serie sono un buon analogia. Tome um iPod, numa loja. Prendere un iPod, in un negozio. Na embalagem há um código de barras. Nel pacchetto c'è un codice a barre. Ele indica à loja que produto é esse; então, quando é escaneado, o código de barras informa exatamente que produto é aquele e quanto custa. Egli sottolinea il negozio che questo prodotto è, una volta che è stato digitalizzato, il codice a barre informazioni che è esattamente ciò che di prodotto e il costo. É possível saber até sua cor e em qual lugar do armazém ele era mantido. Si può imparare da loro colore e la posizione del deposito in cui è stato mantenuto. Todos esses iPods têm exatamente o mesmo tipo de código de barras. Tutti i modelli di iPod hanno esattamente lo stesso tipo di codici a barre.

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 ha anche un numero di serie che è assolutamente unico in materia di qualsiasi altro iPod (o altro dispositivo) in tutto il mondo. O número de série não informa o preço. Il numero di serie non informa il prezzo. Poderia, mas para a loja que o vende esta não seria uma maneira eficaz de armazenar e utilizar essa informação. Si potrebbe, ma per il negozio che vende questo non sarebbe un modo efficace per archiviare e utilizzare tali informazioni. É 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. E 'molto più facile per l'utilizzo di un codice a barre, perché se, ad esempio, le variazioni di prezzo, abbiamo bisogno di cambiare soltanto il prezzo per questo bar-code, non il numero di serie di ciascun sistema.

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. Questo è molto simile a identificazioni e delle classi. Reusadas Informazioni che devono essere tenuti in una classe e le informazioni che sono completamente unico a essere mantenuto in un documento di identità.

IDs têm uma funcionalidade especial nos navegadores ID sono una caratteristica speciale nei browser

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. Classi non hanno caratteristiche particolari nel browser, ma gli ID di avere un trucco molto speciale assi nella manica: un "valore di hash," per gli URL Se si dispone di un URL come http://seudominio.com # commenti, il browser vai cercare di trovare l'elemento con ID "commenti" e vai scorrere automaticamente la pagina fino ad arrivare tale elemento.

É 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. E 'importante notare che il browser vai scorrere la pagina in cui si desidera che l'elemento è, perciò, se vi è qualcosa di speciale, come un DIV con barra di scorrimento (CSS proprietà overflow con valore "auto" o "scorrere"), questo bar vai essere spostato per scorrere - scorrere verso il basso - troppo.

Esta é uma razão importante sobre o porquê é importante ter um ID absolutamente único. Questo è un motivo importante sul perché è importante avere un ID assolutamente unico. Com isso, o navegador sabe até quando rolar. Con questo, il browser sa quando a rotolo.

Elementos podem ter ambos, ID e Classes Elementi possono avere entrambi, ID e Classi

Nada para você quando você usa ambos, ID e classes em um único elemento. Nulla per voi quando si utilizzano entrambi, ID e classi in un unico elemento. Na verdade, fazer isso na maioria das vezes é uma boa idéia. Infatti, così facendo, nella maggior parte dei casi è una buona idea. Tomemos como exemplo o padrão de marcação para item de lista de um comentário no Wordpress: Prendete, ad esempio, il modello di marcatura per un elenco di elementi di commentare 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). Ha una classe che è stato applicato che forse si desidera utilizzare per estilizar tutti i commenti sulla pagina, ma non vi è un unico valore di ID (generati dinamicamente di Wordpress). Com isso, é facilmente possível fazer um link diretamente a um comentário, em uma página, em especial. Questo è facilmente possibile creare un link direttamente a un commento su una pagina in particolare.

CSS não se importa CSS non mente

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 . Sul CSS, non c'è nulla che puoi fare con un ID che non può che fare con una classe e viceversa. Às vezes, quando se está iniciando no estudo de CSS e se tem um problema, tenta-se alternar entre usar ID ou usar Classe. A volte, quando si inizia lo studio dei CSS e hai un problema, prova a passare tra l'utilizzo di ID o la classe di utilizzo. O CSS não se importa. Il CSS non mente.

Javascript se importa Javascript è importante

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. Coloro che si muove con javascript probabilmente sono già più in linea tra le differenze tra le classi e gli ID. Javascript dipende l'esistenza di un elemento della pagina con ID univoco, o la funzione comunemente utilizzati getElementById non siano affidabili. Aqueles acostumados com jQuery sabem o quão fácil é adicionar e remover classes de elementos de página. Quelli abituati a jQuery facile sapere come l'aggiunta e la rimozione classi di elementi della pagina. É uma função nativa no jQuery. Si tratta di un nativo in funzione jQuery. Veja que tal função não existe para IDs. Vedere che questa funzione non esiste per gli ID. Não é responsabilidade do javascript manipular estes valores, porque ele causaria mais problemas que seria útil… Non è la responsabilità di javascript manipolare questi valori, perché potrebbe causare più problemi che sarebbe utile…

Se você não precisa deles, não os use Se non hai bisogno di loro, di non utilizzare

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. Come potete vedere, le classi e gli ID sono molto importanti e che usiamo ogni giorno per estilizar pagine e manipolare ciò che è necessario. Entretanto, você deve usá-los com critério e semanticamente. Tuttavia, si dovrebbe usare con discrezione e semanticamente.

Isto significa evitar coisas do tipo: Ciò significa evitare cose come ad esempio:

 < 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. Sappiamo già: questo elemento è un link, è un punto fermo. 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”). Non vi è nulla di speciale ci deve essere un punto di specificare una classe, dal momento che è possibile applicare l'etichetta nel loro stile (la "a").

Evite este tipo de coisa, também: Evitare questo tipo di cose, anche:

 < div id = "coluna-direita" > <div Id = "column-right"> 

O ID é corretamente utilizado aqui, já que, provavelmente, a página terá somente uma única coluna da direita, mas o nome é inadequado. L'ID è usato correttamente qui, perché, probabilmente, la pagina avrà un solo colonna di destra, ma il nome non è appropriato. Descreva o contexto do elemento, não onde está ou como se parece. Descrivere il contesto l'elemento, se non è o come sembrerebbe. Um ID “barra-lateral” seria melhor. Un ID "bar-side" sarebbe meglio.

Microformatos são apenas nomes específicos de classes Microformatos sono solo nomi specifici delle classi

Pensa que microformatos é difícil para você? Pensi che microformati è difficile per te? Microformato é apenas marcação regular que faz uso de nomes de classes padronizados para a informação que contêm. Microformato è solo marchio che fa uso regolare di standardizzato nomi di classi per le informazioni che contengono. Veja este vCard: Vedere questo 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 = "url fn org" href = "http://www.commerce.net/"> CommerceNet </ a> <div class = "adr"> <span class = " tipo "> Lavora </ span>: <div classe =" street-address "> University Avenue 169 </ div> <span classe =" località Palo Alto "> </ span>, <abbr class =" regione "title = "CA"> CA </ abbr> <span "postal-code"> class = 94301 </ span> <div class = "country-name"> Stati Uniti d'America </ div> </ div> <div class = "tel" > <span Class = "type"> lavoro </ 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>