desenvolvimento para web - xhtml, css, padrões da web, usabilidade, acessibilidade, web design, SEO, blogs e tecnologias para desenvolver a web Entwicklung von Web - XHTML, CSS, Web Standards, Benutzerfreundlichkeit, Zugänglichkeit, Webdesign, SEO, Blogs und Technologie zu entwickeln, die 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. In diesem Artikel, die Vorlage eines Vorschlags für einen Zeitraum von mindestens CSS-Datei, das heißt, dass Aussagen, die meiner Ansicht nach sind wichtig für ein Stylesheet.

O que me levou a escrever este artigo Was hat mich zu diesem Artikel schreiben

Nos últimos dias, tive alguns problemas com arquivos CSS que tive que alterar - e que não fui eu, originalmente, quem os fiz. In den letzten Tagen hatte ich einige Probleme mit CSS-Dateien, die zu ändern - und das war ich nicht ich selbst, ursprünglich,, tat. 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. Jeder Entwickler hat ihren Stil von Web-Programmierung, dies ist tatsächlich eine andere Tatsache ist, dass es schwierig wird, sich für die Wartungs-arbeiten an der Außenseite, wenn die Entwickler haben nicht vereinbarten Standards für Tagging einander. Foi o meu caso… Es war mein Fall…

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. In diesem Artikel wird nicht versuchen, Modelle von CSS-Kodierung, Anregungen, wie die Positionierung der Tasten, und wie sollte es die identação von Texten. Estou focando nas regras, propriamente ditas, e não em como cada um prefere organizar seu código. Ich bin mit Schwerpunkt auf die Regeln selbst, und nicht, wie in jeder lieber zu organisieren Ihren Code. Para tal, o Bruno Dulcetti já tratou muito bem , em seu blog . Zu diesem Zweck wird die Bruno Dulcetti bereits mit sehr gut in Ihrem 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. Wie man gar nicht wollen, dass die gleiche passiert mit anderen Menschen, beschlossen, als würde meiner Meinung nach, nicht sehr umfangreiches Wissen über CSS, einige Regeln unerlässlich für jeden Style Sheet.

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. Erscheinen soll, möchte ich hinterlasse einen aufgezeichnet, dass die Grundlagen für die ich hier getroffen wurde Zusammenstellung von 70 Experten-Ideen für eine bessere CSS-Kodierung, die Smashing Magazin - und übersetzt von Maujor in Ihrem Blog ein, ein anderer, stammt aus meinem eigenen Wissen und Erfahrung mit CSS.

Sem mais enrolações, vamos ao que interessa! Ohne mehr enrolações, zu dem, was wir Angelegenheit!

“Zerar” os elementos "Reset" der Elemente

Para começar, é mais do que importante zerar, no o seletor universal, margin e padding : Zunächst ist es wichtig, mehr als deutlich, in der universellen Selektor, Marge und padding:

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


[update] [Update]
O Pedro Rogério falou sobre uma maneira melhor de zerar os elementos . Die Pedro Rogerio sprach über einen besseren Weg, um die Elemente. Maneira essa que coloco aqui, também. Weg zu stellen, dass auch hier.
[/update] [/ Update]

 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, body, div, span, Applet, Objekt, iframe, H1, H2, H3, h4, h5, h6, p, blockquote, pre, a, abbr, Akronym, Anschrift, groß, Zitat, Code, del, dfn, , font, img, Ins, kbd, q, s, samp, klein, Streik, starke, sub, sup, TT, var a, b, U, I, Mitte, dl, dt, dd, ol, UL, lese ich, fieldset, Form, Etikett, Legende, Tisch, Beschriftung, tbody, tfoot, thead, tr, th, td (margin: 0; padding: 0; border: 0; Kurzbeschreibung: 0; vertical-align: baseline; background: transparent; Body () line-height: 1;) ol, ul (list-style: none;) blockquote, Q (quotes: none;): Fokus (Gliederung: 0; Ins) (text-decoration: none; del (Text) -- Decoration: line-through;) Tabelle (border-collapse: Zusammenbruch; 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. Sie können nur dafür sorgen, dass vermeiden, mindestens ein Dutzend Probleme mit der Positionierung - Eric Meyer, Christian Montoya und Roger Johansson, zum Beispiel, empfehlen diese Praxis.

Um font-size “especial” para html Ein font-size "besondere" zu HTML

O próximo - e, aparentemente, excêntrico - passo é colocar um valor “especial” para font-size , na estilização do html : Die nächste - und scheinbar exzentrischen - Schritt besteht darin, einen Wert von "special" für font-size, das Styling von HTML:

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

Essa veio, também, das 70 dicas , ea explicação é a seguinte: Es kamen auch aus 70 Tipps, und die Erklärung lautet wie folgt:

Este estranho valor de 100.01% para o tamanho de fonte, corrige uma série de bugs em diversos navegadores. Diese seltsame Wert von 100,01% für den Schriftgrad, behebt eine Reihe von Bugs in verschiedenen Browsern. 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. Zuerst definieren Sie eine Größe von der Quelle Element Körper als Prozentsatz (anstelle von MS) verhindert, dass ein Problem in IE / Win, dass tendenziell unverhältnismäßig erhöhen oder verringern Sie die Größe der Quellen für Text enthaltenen Elemente, wo Größe eingestellt ist Quelle in MS . E mais, algumas versões do Opera renderizam tamanhos default de 100% para fontes muito menores, comparadas com outros navegadores. Was mehr ist, bei einigen Versionen von Opera renderizam Standard-Größen von 100% auf Quellen viel kleiner im Vergleich zu anderen Browsern. Safari, por sua vez não se comporta bem com font-size igual a 101%. Safari, die wiederum verhalten sich nicht gut mit font-size in Höhe von 101%.

Retirar a borda feia das imagens que são link Entfernen Sie den Rand der hässliche Bilder, die dem Link

Quando se coloca uma imagem para servir de link , uma borda aparece para indicar isso. Wenn Sie ein Bild, um es zu dienen, als Bindeglied, eine Grenze zu geben scheint. Entretanto, ela é muito feia e, na maioria das vezes, “quebra” toda a harmonia do design web que está sendo utilizado. Allerdings ist es sehr hässlich und in den meisten Fällen, "Breaking" Das ganze Reihe von Web-Design verwendet wird. Para resolver isso, basta zerar o border do elemento img : In diesem Zusammenhang setzen Sie einfach die Grenze des Elements img:

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

O tal “CSS mínimo” Das solche "Minimum css"

Então, o arquivo final - ou seria “inicial”? Dann, Ende der Datei - oder erfahren würde "Original"? :-) - ficaria da seguinte maneira: :-) - Wäre wie folgt:

* { * (
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, body, div, span, Applet, Objekt, iframe, H1, H2, H3, h4, h5, h6, p, blockquote, pre, a, abbr, Akronym, Anschrift, groß, Zitat, Code, del, dfn, , font, img, Ins, kbd, q, s, samp, klein, Streik, starke, sub, sup, TT, var a, b, U, I, Mitte, dl, dt, dd, ol, UL, lese ich, fieldset, Form, Etikett, Legende, Tisch, Beschriftung, tbody, tfoot, thead, tr, th, td (margin: 0; padding: 0; border: 0; Kurzbeschreibung: 0; vertical-align: baseline; background: transparent; Body () line-height: 1;) ol, ul (list-style: none;) blockquote, Q (quotes: none;): Fokus (Gliederung: 0; Ins) (text-decoration: none; del (Text) -- Decoration: line-through;) Tabelle (border-collapse: Zusammenbruch; border-spacing: 0; html) (font-size: 100,01%;) (img border: 0;) 

Por fim… Schließlich…

Essas dicas que eu coloquei são meras “medidas de segurança”, a fim de se evitar problemas com estilizações. Diese Tipps, die ich angesprochen sind reine "Sicherheitsmaßnahmen", um Probleme zu vermeiden mit 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. Sicherlich gibt es noch andere mehr, denn jeden Tag, eine neue Technik und / oder wie man Tag erscheint - und / oder die Technologie selbst wird verbessert. 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. Wer mehr hören, Tipps und Trick macetes für einen Zeitraum von mindestens CSS, bitte, geben Sie einen Kommentar hier oder senden Sie eine E-Mail an mich kann ich die Update-Artikel.

Ah! E confiram as 70 dicas de CSS , porque realmente são muito boas ! Und die 70 Tipps für CSS, weil sie wirklich sehr gut!