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

Neste artigo, apresento uma proposta para um arquivo CSS mínimo, quer dizer, as declarações que, ao meu ver, são indispensáveis para uma folha de estilos. Dans cet article, présenter une proposition pour un minimum de fichier CSS, qui est, des déclarations qui, à mon avis, sont essentielles à une feuille de style.

O que me levou a escrever este artigo Que m'ont poussé à écrire cet article

Nos últimos dias, tive alguns problemas com arquivos CSS que tive que alterar - e que não fui eu, originalmente, quem os fiz. Au cours des derniers jours, j'ai eu quelques problèmes avec les fichiers CSS qui devait changer - et que je n'étais pas moi-même, à l'origine, qui a fait. Cada desenvolvedor web tem seu estilo de codificação, isso é fato; outro fato é que fica complicado de prestar manutenção no trabalho alheio, caso os desenvolvedores não tenham acordado padrões de codificação entre si. Chaque développeur a leur style de codage Web, c'est fait, un autre fait est qu'il devient difficile de fournir des travaux d'entretien sur l'extérieur, si les développeurs n'ont pas accepté les normes de marquage pour un autre. Foi o meu caso… Il a été mon cas…

Neste artigo, não tentarei apresentar modelos de codificação CSS, sugestões de como se deve posicionar as chaves, e como deve ser a identação dos textos. Dans cet article, ne pas essayer de faire des modèles de codage CSS, des suggestions sur la façon de positionner les touches, et comment il devrait être le identação des textes. Estou focando nas regras, propriamente ditas, e não em como cada um prefere organizar seu código. Je suis en se concentrant sur les règles, elles-mêmes et non sur la manière dont chacun préfère organiser votre code. Para tal, o Bruno Dulcetti já tratou muito bem , em seu blog . À cette fin, le Bruno Dulcetti déjà très bien traitée dans votre blog.

Como não desejo que o mesmo aconteça com as outras pessoas, decidi apresentar como seria, na minha opinião e não muito extensos conhecimentos em CSS, algumas regras indispensáveis para qualquer folha de estilos. Comment ne pas vouloir se passe la même avec d'autres personnes, a décidé de mettre en place comme cela, à mon avis, pas très grande connaissance de CSS, certaines règles indispensables à toute feuille de style.

Para constar, gostaria de deixar registrado que uma das bases do que vou apresentar aqui foi tirada da compilação 70 Expert Ideas For Better CSS Coding , do Smashing Magazine - e traduzida pelo Maujor , em seu blog ; outra, vem do meu próprio conhecimento e experiência com CSS. À paraître, je voudrais laisser une constaté que les bases dont je vais présenter ici a été prise compilation de 70 experts des idées pour mieux codage CSS, The Smashing Magazine - et traduits par Maujor dans votre blog, une autre, vient de ma propre connaissance et expérience avec le CSS.

Sem mais enrolações, vamos ao que interessa! Sans plus enrolações, à ce que nous sommes!

“Zerar” os elementos "Reset" les éléments

Para começar, é mais do que importante zerar, no o seletor universal, margin e padding : Pour commencer, il est plus important d'être évident, dans le sélecteur universel, de marge et de padding:

* { * (
margin:0; margin: 0;
padding:0; padding: 0;
} )


[update] [Update]
O Pedro Rogério falou sobre uma maneira melhor de zerar os elementos . Pedro Rogerio parlé d'un meilleur moyen pour réinitialiser les éléments. Maneira essa que coloco aqui, também. Moyen de mettre cela ici aussi.
[/update] [/ Mettre à jour]

 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font , img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center , dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin : 0 ; padding : 0 ; border : 0 ; outline : 0 ; vertical-align : baseline ; background : transparent ; } body { line-height : 1 ; } ol, ul { list-style : none ; } blockquote, q { quotes : none ; } :focus { outline : 0 ; } ins { text-decoration : none ; } del { text-decoration : line-through ; } table { border-collapse : collapse ; border-spacing : 0 ; } html, l'organe div, span, applet, l'objet, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, de l'acronyme, adresse, grand, cite, code, del, dfn, , police, img, ins, kbd, Q, S, samp, les petites, de grève, fort, sub, sup, tt, var a, b, u, i, au centre, dl, dt, dd, ol, ul, j'ai lu, fieldset, la forme, une étiquette, une légende, tableau, une légende, tbody, tfoot, thead, tr, th, td (margin: 0; padding: 0; border: 0; grandes lignes: 0; vertical-align: niveau de référence; arrière-plan: transparent; Organe () line-height: 1;) ol, ul (list-style: none;) blockquote, q (prix: none;): Focus (grandes lignes: 0; ins) (text-decoration: none; del (texte) -- La décoration:-par ligne;) tableau (border-collapse: collapse; border-spacing: 0;) 

Podem ter certeza de que somente isso evitará, pelo menos, uma dezena de problemas com posicionamento - Eric Meyer , Christian Montoya e Roger Johansson , por exemplo, recomendam tal prática. Ils ne peuvent faire en sorte que d'éviter au moins une douzaine de problèmes de positionnement - Eric Meyer, Christian Montoya et Roger Johansson, par exemple, de recommander cette pratique.

Um font-size “especial” para html Un font-size "spécial" au format html

O próximo - e, aparentemente, excêntrico - passo é colocar um valor “especial” para font-size , na estilização do html : La prochaine - et apparemment excentrique - étape consiste à placer une valeur «spéciale» pour la taille de la police, le style de HTML:

 html { font-size : 100 . 01 % ; } html (font-size: 100. 01%;) 

Essa veio, também, das 70 dicas , ea explicação é a seguinte: Il est arrivé, aussi, de 70 conseils, et l'explication est la suivante:

Este estranho valor de 100.01% para o tamanho de fonte, corrige uma série de bugs em diversos navegadores. Cette étrange valeur de 100,01% pour la taille de la police, corrige un certain nombre de bugs dans divers navigateurs. Primeiro, definir um tamanho de fonte no elemento body em percentagem (no lugar de EM) previne um problema no IE/Win que tende a aumentar ou diminuir desproporcionalmente o tamanho de fontes para textos contidos dentro de elementos onde for definido tamanho de fonte em EM. Tout d'abord, définir une taille de la source élément corps comme un pourcentage (au lieu de la sclérose en plaques) empêche un problème dans IE / Win qui tend à disproportionnée augmenter ou diminuer la taille des sources de texte figurant dans les éléments où la taille est fixée à la source dans les États membres . E mais, algumas versões do Opera renderizam tamanhos default de 100% para fontes muito menores, comparadas com outros navegadores. De plus, certaines versions d'Opera renderizam taille par défaut de 100% à des sources beaucoup plus faible par rapport à d'autres navigateurs. Safari, por sua vez não se comporta bem com font-size igual a 101%. Safari, à son tour, ne se comporte pas bien avec les polices de taille égale à 101%.

Retirar a borda feia das imagens que são link Retirez la pointe de l'affreuse image de lien

Quando se coloca uma imagem para servir de link , uma borda aparece para indicar isso. Lorsque vous placez une image pour servir de lien, une frontière semble indiquer que. Entretanto, ela é muito feia e, na maioria das vezes, “quebra” toda a harmonia do design web que está sendo utilizado. Toutefois, il est très laid et, dans la plupart des cas, "briser" la gamme complète de conception de sites Web en cours d'utilisation. Para resolver isso, basta zerar o border do elemento img : Pour l'adresse, il suffit de réinitialiser la frontière de l'élément img:

 img { border : 0 ; } (img border: 0;) 

O tal “CSS mínimo” Le ces «minimum CSS"

Então, o arquivo final - ou seria “inicial”? Ensuite, le fichier fin - ou serait "original"? :-) - ficaria da seguinte maneira: :-) - Serait la suivante:

* { * (
margin:0; margin: 0;
padding:0; padding: 0;
} )

 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font , img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center , dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin : 0 ; padding : 0 ; border : 0 ; outline : 0 ; vertical-align : baseline ; background : transparent ; } body { line-height : 1 ; } ol, ul { list-style : none ; } blockquote, q { quotes : none ; } :focus { outline : 0 ; } ins { text-decoration : none ; } del { text-decoration : line-through ; } table { border-collapse : collapse ; border-spacing : 0 ; } html { font-size : 100 . 01 % ; } img { border : 0 ; } html, l'organe div, span, applet, l'objet, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, de l'acronyme, adresse, grand, cite, code, del, dfn, , police, img, ins, kbd, Q, S, samp, les petites, de grève, fort, sub, sup, tt, var a, b, u, i, au centre, dl, dt, dd, ol, ul, j'ai lu, fieldset, la forme, une étiquette, une légende, tableau, une légende, tbody, tfoot, thead, tr, th, td (margin: 0; padding: 0; border: 0; grandes lignes: 0; vertical-align: niveau de référence; arrière-plan: transparent; Organe () line-height: 1;) ol, ul (list-style: none;) blockquote, q (prix: none;): Focus (grandes lignes: 0; ins) (text-decoration: none; del (texte) -- La décoration:-par ligne;) tableau (border-collapse: collapse; border-spacing: 0; html) (font-size: 100. 01%;) (img border: 0;) 

Por fim… Enfin…

Essas dicas que eu coloquei são meras “medidas de segurança”, a fim de se evitar problemas com estilizações. Ces conseils que j'ai posées ne sont que des "mesures de sécurité" afin d'éviter les problèmes avec estilizações. Certamente outras mais existem, porque, a cada dia, uma nova técnica e/ou maneira de se codificar aparece - e/ou a própria tecnologia é aperfeiçoada. Certes, il existe d'autres, car chaque jour, une nouvelle technique et / ou comment tag semble - et / ou la technologie elle-même est amélioré. Quem conhecer mais dicas, macetes e artimanhas para um CSS mínimo, por favor, coloque um comentário aqui ou me envie um email para eu possa atualizar o artigo. Qui en savoir plus conseils, et macetes Trick pour un minimum CSS, s’il vous plaît, mettez un commentaire ici ou envoyez un courriel à moi je peux mettre à jour l'article.

Ah! E confiram as 70 dicas de CSS , porque realmente são muito boas ! Et donnez les 70 conseils pour CSS, car ils sont vraiment très bien!