Tableless - CSS - Portugal-a-Programar
Por M6, 6 de Agosto de 2008 em CSS
Sou do tempo em que a web era constituida por páginas de texto e se usavam apenas 256 tons de cinzento e o CSS não existia.
Ora, mais de uma década volvida, está na hora de me actualizar.
Comecei por usar CSS para as coisas básicas: tipos de letra, tamanhos e cores, mas ainda continuo "agarrado" à tabelas e até (palavra proibida para a nova geração de designers) frames.
Como tal, gostaria que me indicassem onde posso aprender a desenvolver sem tabelas, um bom guião para iniciados, de preferência para pessoal da velha guarda como eu.
http://www.domedia.org/oveklykken/articles.php - Exemplos
http://www.smashingmagazine.com/2006/10/25/css-techniques-tutorials-layouts/ - Conjunto de tutorials, exemplos, técnicas, etc
Obrigado Battousai, vou ver isso com atenção.
O site do Maujor também é capaz de ser interessante, embora foque alguns aspectos mais avançados.
Cuidado que agora ao aprender CSS vão começar novos problemas de compatibilidades entre browsers... culpa do IE, maioritariamente.
softclean, obrigado pela dica, mas os problemas de compatibilidade é algo com que sofro há já muitos anos, não só ao nível do CSS (que não me é totalmente desconhecido), mas também de JavaScript e outros problemas de render...
Já li este http://www.cssbasics.com/ e achei 5 estrelas, muito claro e fácil de ler, já sabia 85% do que ali estava escrito, mas os outros 15% que aprendi valeram a pena.
Também já dei uma olhadela pelo http://www.tableless.com.br e gostei bastante, os vídeo tutoriais foram bastante úteis.
Se fores do tipo de querer saber tudo sobre CSS aconselho-te os livros do dummies.com, nomeadamente:
http://www.dummies.com/WileyCDA/DummiesTitle/CSS-Web-Design-For-Dummies.productCd-0764584251.html
entre outros que terei todo o gosto em arranjar-te se achares conveniente.
Se fores do tipo de ir aprendendo com a prática os sites que o pessoal referenciou são porreiros. Acrescento também:
http://imasters.uol.com.br/secao/css/
Tens que ter em atenção que desta forma o site passa a ser estruturado com base em div's. Cada div pode ter associada um ID ou CLASS que são precisamente a forma de fazer a ligação a determinada propriedade. O ID é utilizado apenas para situações únicas (o teu html só poderá fazer referência a ele uma vez), ao contrário do CLASS que pode ser usado várias vezes. Como por ex.
Outro grande problema será com a compatibilidade entre browsers. Existem diversos truques para dar a volta ao problema. Para mim o melhor é:
.paddingTeste {
padding: 10px; /* FF, IE6 e IE7 reconhecem os 10px */
!padding: 11px; /* IE7 reconhece os 11px */
_padding:12px; /* IE6 reconhece os 12px */
Ou seja se colocares um ! antes de determinada propriedade o FF não reconhecerá essa propriedade (não tenho a certeza se o IE6 reconhece). E se colocares um _ apenas o IE6 reconhecerá essa propriedade. É útil quando determinado "elemento" necessita de valores diferentes para ficar na mesma posição nestes 3 browsers. Isto resolve mas não é de todo a melhor maneira de fazer as coisas uma vez que apenas remedeia e não vai à origem do problema.
Este site deve ter todas as soluções para problemas de posicionamento, etc.
Já agora... porque no fim vais querer testar em vários browsers e o IE6 ainda tem uma percentagem importante de utilizadores, vais ter algumas dificuldades uma vez que o IE7 não te permitirá instalar o IE6. O MultipleIE resolve-te o problema.
Entretanto, vais querer testar browsers em outros sistemas operativos. O http://browsershots.org/ ajuda-te com isso.
Grandes referências!
lugh, obrigado pelas dicas.
Não me leves a mal, mas tenho muita aversão à série "For Dummies"/"Para Totós": acho que tratam as os leitores como se fossem parvos/totós (foi a impressão com que fiquei ao folhear os primeiros livros com que me cruzei dessa série)...
Não conhecia essa extensão do IE para CSS, de novo a MS a inventar a roda e tentar complicar a vida aos profissionais da área... Enfim...
Faz sentido porque eu sou um bocado totó...
Em relação ao "IE hack" não sei qual foi a ideia deles mas acaba por ser uma forma eficaz e pouco ortodoxa de resolver as cenas.
Ai é que está o erro... Eles assumem que és totó quando na realidade és apenas ignorante, o que é completamente diferente. Ninguém nasce ensinado pelo que somos todos ignorantes quando nascemos, não somos totós...
Forma eficaz e pouco ortodoxa?!?
Permite-me discordar, mas a única forma eficaz de resolver um problema é a sua correcção de raíz e não mandar marretadas como parece acontecer aqui. Se há um problema, resolve-se não se criam novos problemas a quem desenvolve para a web. Além disso é tão simples: basta não inventar!
Sou só eu que acho estranho a própria MS ter hacks para cada versão do IE??? Sou só eu que acho estranho não fazerem a coisa certa uma única vez e obrigar a sua própria equipa de desenvolvimento, qualidade e documentação a trabalho extra com algo que, a bem da verdade, não me parece que traga valor acrescentado nenhum???
Mesmo a nível profissional tenho de desenvolver focado em IE, só recorro a extensões da MS quando assim tem de ser, caso contrário sigo o standard, ajuda a evitar dissabores...
A MS devia ajudar e simplificar a vida aos seus seguidores, mas assim só lhes complica a vida...
As coisas vão finalmente melhorar com o IE8.
O IE6 foi sem dúvida uma vergonha. Era na altura, dos browser mainstream, aquele que menos obedecia aos standards. O IE7 corrigiu muitas das falhas e o IE8 finalmente indica que a equipa de desenvolvimento percebeu de uma vez por todas que já não existe o espaço para browser extensions que existia antes. O IE8 passa no Acid2. As tuas críticas fazem todo o sentido e juntam-se ao coro de protestos que ao longos dos anos obrigaram a Microsoft a seguir de forma mais próxima os standards.
Infelizmente, o mundo empresarial é aquele que em maior parte obriga a que ainda tenhamos de nos preocupar com versões antigas dos browsers. O IE6 tem ainda uma margem significativa de utilizadores, sendo que a grande fatia são empresas. O IE7 irá um dia substituí-lo e manterá ainda por muitos anos a necessidade de nos preocuparmos com estes problemas. Mas depois temos o problema de adopção de outros browsers. Pessoalmente penso que o Safari está a percorrer um caminho perigoso na sua versão para Windows. E das duas uma, ou acaba com a versão Windows, ou resolve os problemas de uma vez por todas. Andamos nisto à anos. Por outro lado o Safari não obedece aos standards numa área particularmente sensível que não é avaliada pelo Acid; a dimensão natural dos controles. Uma dropdown box por exemplo, é sempre maior no Safari do que em qualquer outro browser, porque aqui a parte do control com a seta a apontar para baixo não faz parte da propriedade WIDTH.
Para alguns conselhos de boas práticas na área de CSS hacks, aconselho:
http://24ways.org/2005/avoiding-css-hacks-for-internet-explorer
Dá uma vista de olhos e segue os links
EDIT: Ah! E ia-me esquecendo...
Wiley Publishing - CSS Hacks & Filters, Making Cascading Stylesheets Work, por Joseph Lowery
Friends of Ed - CSS Mastery Advanced Web Standards Solutions, por Andy Budd
Tanto um como o outro são excelentes. Compra os dois se puderes. Se só puder ser um, definitavamente vais querer o do Andy Budd
EDIT 2: e também muito útil:
http://dithered.chadlindstrom.ca/css_filters/index.html
com listagens de filtros e suas compatiblidades
Há mais de uma década que ando a ouvir esse paleio em relação às cenas da MS...
Em parte foi por causa disso que me afastei das ferramentas deles, é que me fartei de esperar e de ouvir "da próxima é que é"...
E quando a próxima chega, desilude em parte e começa a ouvir-se de novo "para a próxima é que é"...
Para quem anda nisto à alguns anos, basta lembrar a velha "guerra" do VB não ser OO, para ai desde a versão 2 que ouvia dizer "para a próxima é que é", saiu o .net, muitos anos depois, mas ai já era tarde de mais para mim, nessa altura já eu estava noutra...
Fico contente por o IE8 ser como deve ser, a Mozila fez um bom trabalho!
hehe. Vocês são tramados.
Mas é verdade, não fosse a pressão do Firefox e, menos, do Opera e a MS ainda hoje não teria evoluído o IE6.
A concorrência é saudável e benéfica para os utilizadores.
Permite-me discordar, mas a única forma eficaz de resolver um problema é a sua correcção de raíz e não mandar marretadas como parece acontecer aqui. Se há um problema, resolve-se não se criam novos problemas a quem desenvolve para a web.