Inherit no Internet Explorer

Postado por: Pedro Rogério em
  • 21 abr
  • 14
Herança em CSS

O que é Inherit?

De acordo com as especificações das CSS 2.1, inherit pode ser definido como:

É uma característica das CSS ao qual podemos definir herança entre os estilos, suportada por todas as propriedades CSS.

Se por exemplo, se definirmos que nossa tag de título h1 tenha os seguintes estilos:

h1{
   color:black;
   padding:10px;
}

E logo após definirmos os seguintes estilos para um link ou qualquer elemento que tenha como pai o h1, dessa forma:

h1 a {
   color:inherit;
}

Continuar lendo »

CSS Star Rating

Postado por: Pedro Rogério em
  • 16 abr
  • 8

Procurando na internet você pode encontrar vários scripts de rating, alguns muito complexos utilizando marcação as vezes desnecessária e outros muitos complicados de customizar. Nesse tutorial, desenvolvido por Henry Hoffman, você aprenderá de uma forma muito simples a desenvolver um sistema de rating utilizando HTML e CSS, utilizando uma única imagem em 3 estados: static, hover e active.

Como?

O segredo consiste em utilizar margens negativas. Primeiramente vamos fazer o download da imagem que será utilizada no tutorial e depois vamos preparar o nosso HTML, onde serão utilizados listas desordenadas:

Continuar lendo »

Não use @import

Postado por: Pedro Rogério em
  • 13 abr
  • 14

O que é @import?

A utilização de @import dentro da tag <style> em HTML era utilizada anteriormente para esconder folhas de estilo do Netscape 4, que não tinha suporte a @import, de maneira que, opcionalmente poderíamos proporcionar um CSS com estilos básicos para esse browser e utilizar diferentes regras em CSS com a utilização de da tag <link />. Esta técnica quando não era proporcionada um estilo com a utilização de <link>, ocorria o inconveniente de o conteúdo aparecer sem qualquer estilo CSS, o famoso FOUC (Flash of Unstyled Content).

Uma outra técnica também que poderia ser utilizada para esconder estilos do Netscape 4 era de especificar o atributo media como “all”, ou uma combinação de vários atributos media, já que ele só entendia o atributo media “screen”.

Continuar lendo »

CSS Hacks para IE, Firefox, Opera, Safari, Konqueror

Postado por: Pedro Rogério em
  • 5 abr
  • 39

Podem haver momentos no desenvolvimento web que você necessitará fazer o uso de hacks CSS devido a inconsistência que ocorre entre os browsers, pois existem browsers que insistem ainda em não seguir corretamente os padrões web(leia-se IE). Mas nessas situações vocÊ não será discriminado se fizer o uso de Hacks CSS, para os leigos, uma forma de escrever CSS para que só certos browsers entendam aquela regra definida e os outros a ignorem.

Existem Hacks CSS para todos os browsers, conheça os mais utilizados na lista abaixo:

Internet Explorer 5 e 5.5:

voice-family: "\"}\""; voice-family:inherit;

Para o IE 5 e 5.5 basta adicionar as regras acimas ao seletor desejado.

Internet Explorer 6 e anteriores:

* html {}

Continuar lendo »

Como utilizar variáveis no CSS

Postado por: Pedro Rogério em
  • 2 abr
  • 8

Enquanto somente o WebKit aceita temporariamente o suporte a variáveis em CSS eu sigo por uma busca incessante atrás de uma forma, e acabei a encontrando com a utilização de jQuery.

cssWithVars leva o conceito de Orientação a objetos ao CSS onde você pode reutilizar código de forma efetiva. A utilização é muito simples, primeiro devemos criar a nossa variável em nosso CSS:

variavel1 {
	float:left;
    font-size:1em;
}

O 2º passo é chamar a variável no lugar da declaração das propriedades dentro de chaves []:

h1 {
	[variavel1]
}

Vejam só nesse exemplo criado o css funcionando através de variáveis. Preste muita atenção que você dever adicionar os seguintes arquivos a sua página para que ela funcione corretamente:

<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script src="jquery.utilities.js" type="text/javascript"></script>
<script src="jquery.createCSSwithVars.js" type="text/javascript"></script>
<link rel="stylesheet" href="caminho/do/css.css" type="text/css" media="csswithvars" />

No exemplo foi utilizado a última versão do jQuery, a 1.3.2, plugin jQuery Utilities, o plugin jQuery createCSSwithVars, e o arquivo CSS com o media type csswithvars.

Download

Páginas:«1...891011121314...20»