Pinceladas da WebMovido a: XHTML, CSS, PHP e WebStandards

O seletor de combinação irmão em geral é representado pelo sinal “til” (U+007E, ~), que separa 2 sequências de seletores simples. Os elementos representados pelas 2 sequências compartilham do mesmo pai na árvore do documento, e o elemento representado pela 1ª sequência precede, não necessariamente nessa ordem, o elemeno representado pelo segundo.

Ficaram meio confusos? Mas a lógica é fácil. Tomem como exemplo o seguinte CSS:

h1 ~ pre {border:1px dotted red;}

Representa um elemento pre que segue um elemento h1, que no HTML pode ser escrito dessa forma:

<h1>Definição da função a</h1>
<p>Função a(x) é aplicada a todas as figuras da tabela.</p>
<pre>function a(x) = 12x/13.5</pre>

Vejam no exemplo que só a tag pre ficou com uma borda vermelha, independente de sua posição, desde que as tags compartilhem o mesmo pai. Testado e aprovado no IE7, Mozila, Opera, Konqueror e Safari.

Referências

• http://www.w3.org/TR/css3-selectors/#general-sibling-combinators

Com a chegada das CSS3, que ainda estão em desenvolvimento, eu fico a cada dia mais surpreendido com o seu grande potencial, só não fico mais ainda devido a nosso querido amigo Internet Explorer, mas isso é um caso a parte. Hoje tomei conhecimento de mais uma pseudo-classe das CSS3 chamada :target, onde você pode manipular as âncoras da sua página. Para aqueles que não sabem o que é uma âncora em HTML, imagine uma URL com um sinal de tralha (#) seguido de um nome de âncora ou um ID de qualquer elemento, que ao você clicar é levado para o local ou destino indicado no mesmo documento. Esse destino também pode ser chamado de :target, exemplo:

http://www.exemplo.com/top.html#secao_2

O exemplo acima ilustra bem o que foi dito. Agora, se utilizar-mos a pseudo-classe :target podere-mos aplicar qualquer estilo CSS a âncora em questão no momento em que o usuário clicar na mesma. Levem em consideração o seguinte CSS:

*:target { color:#8A7575; background-color:#D0C8C8; border:3px double #000; }
*:target::before { content:url(target.png) }

Agora, abram esse exemplo. Experimentem clicar no link do topo da página, como podem ver, é aplicado os estilos definidos somente a âncora especificada, com isso é possível fazer muita coisa interessante, só basta colocar a cabeça pra funcionar. E lembrando que essa propriedade só funciona nos Browsers baseados no motor Gecko, Konqueror e Safari.

Referências

• http://www.w3.org/TR/css3-selectors/#target-pseudo
• http://www.maujor.com/tutorial/seletores-css3.php

Essa pseudo-classe é aplicada a elementos vazios do HTML, ou seja, imagine que você tem uma tag p dessa forma:

<p></p>

Se no CSS você criar uma definição dessa forma:

p:empty { background-color:#FF0000; }

Todos os parágrafos vazios da página ficarão com a cor de fundo vermelha. A primeira impressão pode parecer inútil utilizá-la, mas imagine onde o conteúdo é gerado dinamicamente, seria uma boa pra vc descobrir quais tags estão sem conteúdo. Para que fique mais claro o entendimento do tutorial, dêem uma olhada no seguinte exemplo. Lembrando que só funciona no Mozilla, Konqueror e Safari.

Referências

• http://www.w3.org/TR/css3-selectors/#empty-pseudo
• http://www.quirksmode.org/css/empty.html

Recentemente fiquei conhecendo o blog oficial do Cascading Style Sheets Working Group, ou seja, o blog do grupo de trabalho de CSS do W3C. Portanto, mais um blog na praça para termos como referência.

Imprimir uma página web muitas vezes pode ser uma dor de cabeça, com certeza todos nós já passamos por algum problema quando fomos imprimir uma página com muitos gráficos e cores, onde nada sai do jeito que você queria. Mas isso pode ser contornado facilmente com CSS, quando, por exemplo, você criar a sua folha de estilos com media=”screen” (aquele css usado para exibição nos monitores), basta você duplicá-lo, renomeá-lo, e alterar seu atributo media para print. Com isso teriamos 2 folhas de estilo distintas:

<link rel="stylesheet" type="text/css" href="normal.css"  media="screen" />
<link rel="stylesheet" type="text/css" href="impressao.css"  media="print" />

Agora, para personalizar a impressão, basta você definir o que vocÊ quer que apareça e o que não apareça quando o usuário for imprimir, por exemplo, aqui no blog eu poderia definir um display:none para o menu, sidebar, rodapé e personalizar as fontes e cores do post, para que seja impresso na página realmente o que interessa.

Caso você queira que as urls apareçam impressas na página, basta utilizar o seguinte código CSS em suas folhas de impressão:

a[href^="/"]:after {
  content: " (http://www.seusite.com.br" attr(href) ") ";

Até o lançamento do Safari para o Windows eu nunca tinha o utilizado, mas por esses dias descobri uma coisa bastante interessante, se você utiliza o Safari, experimente peguer um formulário qualquer, vá até o textarea e tente redimensioná-lo. O Safari suporta essa opção, como você pode ver na imagem abaixo:

Não ficou satisfeito e quer fazer um teste? Dê uma olhada nesse exemplo. Mas se você não quer que isso aconteça nos seus formulários, existe uma maneira bem simples de corrigir isso, basta utilizar as propriedades do CSS min-height, max-height, min-width e max-width, onde iremos travar a altura e a largura mínima. Vejamos um exemplo:

CSS

textarea {
	min-width:400px;
	max-width:400px;
	min-height:250px;
	max-height:250px;
	width:400px;/* Utilizado para o IE6 */
	height:250px;/* Utilizado para o IE6 */
}

Experimente agora tentar redimensionar esse textarea.

Jorge Epuñan desenvolveu recentemente um Widget para o Mac dos comentários condicionais, se você toda vez tinha que ficar procurando na net a sintaxe correta deles, agora eles só ficam a um clique de distância. A desvantagem é que só pra quem tem Mac.

Para centralizar o site com CSS, geralmente utiliza-se de um text-align:center; no body de nossa página para que o site fique centralizado no IE, e para os outros Browsers, aplicamos margin:0 auto;, só que também temos que dar um text-align:left; aí para corrigir o hack que utilizamos para centralizar o site no IE, pois senão todo o conteúdo do site irá ficar centralizado na página. Recentemente descobri uma maneira bem mais fácil de centralizar o site na página com CSS em qualquer resolução, que consite no seguinte:

Na Div que contém todo o site, aplique o seguinte CSS:

#content
{
  position: relative;
  left: 50%;
  width: 740px;
  margin: 0 0 0 -370px;
}

E no HTML:

<div id="content">
   <!-- Conteúdo do site -->
</div>

Mais simples impossível não? O que precisamos basicamente é definirmos que a div que contém o site irá se posicionar relativamente ao corpo da página, mas precisamente 50%, em width é onde você coloca a largura total dessa Div, alí foi usado 740px, e a mágica acontece quando definimos que todas as margens estão zeradas, menos a margem esquerda, que deverá ser a metade do tamanho da Div que contém o site, só que negativo. Dúvida que funciona? Então dê uma olhada.

Quer aprender a fazer um Menu estilo Windows Vista com CSS? Então dê uma olhada no tutorial do Blog do Itookia. Veja aqui um exemplo do menu. Ficou interessado no menu? Baixe aqui o código fonte.

Vi aqui: http://www.anieto2k.com/2007/08/06/menu-estilo-windows-vista-en-css/

Hoje em dia você encontra Frameworks praticamente para todas as linguagens de programação, até um tempo atrás eu pensava que era impossível desenvolver um Framework para CSS, pois ele varia muito de site para site, mas andei pesquisando sobre o assunto, e vi que é possível sim. Por exemplo, se você utiliza nomes em comum para as classes ou ids que estruturam seu site, como container, header, content, footer, é possível deixar em um CSS separado definições básicas para isso, ou até mesmo já deixar pronto algumas manhas que utilizamos no dia-a-dia, principalmente para os IEs.

Com base nisso, estou pensando em desenvolver meu próprio Framework, uma coisa bem básica de início, para depois, com o tempo, ir aprimorando, vamos ver no que vai dar, quando estiver pronto coloco ele aqui para download. Por enquanto, dê uma olhada nesses que encontrei:

• http://bjorkoy.com/blueprint/index.html
• http://www.contentwithstyle.co.uk/Articles/17/a-css-framework
• http://jimwhimpey.com/blog/2007/my-css-framework/
• http://www.yaml.de/en/home.html
• 23 Frameworks CSS

E você, utiliza algum Framework CSS no seu dia-a-dia? Já desenvolveu algum? Deixe sua opnião sobre assunto.