Um dos elementos HTML que frequentemente entra em colisão com CSS é o img
elemento. Como aprendemos em Solicitar Métricas Corrigindo Problemas de Mudança de Structure Cumulativa no DavidWalshBlog artigo, fornecendo dimensões de imagem dentro do picture
tag ajudará a melhorar a pontuação do seu web site. Mas em um mundo onde o design responsivo é rei, precisamos que CSS e HTML trabalhem juntos.
A maioria dos ajustes de estilo de design responsivo são feitos por meio de max-width
valores, mas quando você fornece um top
valor para sua imagem, você pode obter uma imagem distorcida. O objetivo deve ser sempre exibir imagens em dimensões relativas. Então, como garantimos a top
atributo não entra em conflito com max-width
valores?
A resposta é tão fácil quanto top: auto
!
/* assuming any media question */ img { /* Make sure the picture would not go offscreen */ max-width: 500px; /* Make sure the picture top is responsive no matter HTML attribute */ top: auto; }
A dança para agradar usuários e mecanismos de busca é sempre um equilíbrio divertido. CSS e HTML nunca foram feitos para entrar em conflito, mas em alguns casos eles entram. Use este código para otimizar para usuários e mecanismos de busca!
Demonstrações favoritas do CodePen de Chris Coyier
David me perguntou se eu toparia um visitor publish escolhendo algumas das minhas canetas favoritas da CodePen. Uma tarefa assustadora! São tantas! Mas consegui escolher algumas que me deixaram impressionado nos últimos meses. Se você…
Raspador PHP IMDB
Já faz um bom tempo desde que escrevi um PHP grabber e a coceira finalmente me pegou. Desta vez, a vítima é o Worldwide Film Database, também conhecido como IMDB. O IMDB tem informações sobre todos os filmes já feitos (ou assim parece). O…