HTML5 CSS Reset

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

Enquanto o HTML5 não foi lançado oficialmente, você deve utilizar de artimanhas para que ele funcione corretamente em todos os browsers, e como eu já disse em um outro post, todos os elementos HTML possuem por padrão algum estilo incorporado, isso não será diferente no HTML5, mas como os browsers ainda não tem pré-definido em seu “core” se as novas tags HTML5 são de bloco e inline, as diferenças entre elas, você por enquanto deve especificar no CSS essa diferença.

Foi aí que pesquisando encontrei mais um Reset CSS agora com foco em HTML5:

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small,  strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}
body {
	line-height: 1;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
section, article, aside, header, footer, nav, dialog, figure {
	display:block;
}
Central Server

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

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

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 »

Contar e limitar caracteres em textarea

Postado por: Pedro Rogério em
  • 3 abr
  • 10

jQuery Limit plugin é muito útil se você precisa cortar e limitar caracteres de textareas ou campos input. A utilização é muito simples, basta ficar atento a seguinte estrutura html:

Ainda restam <span id="left"></span> caracteres a serem digitados.
<textarea>Lorem ipsum dolor sit amet,</textarea>

Depois basta definir no JavaScript o número máximo de caracteres e qual elemento irá mostrar a contagem de caracteres, no exemplo foi um span com o id “left”:

$('textarea').limit('140','#left');

Se você não deseja mostrar ao usuário o número de caracteres restantes, basta deixar o código dessa forma:

$('textarea').limit('140');

Vejam o exemplo.

Como utilizar variáveis no CSS

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

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

Os benefícios de utilizar JavaScript não Obstrutivo

Postado por: Pedro Rogério em
  • 31 mar
  • 8

Se você utiliza JavaScript não obstrutivo em seus projetos você está proporcionando uma maior acessibilidade a seus projetos, ou seja, se os scripts fores desabilitados eles não irão interferir no funcionamento da página.

Utilizar JavaScript não obstrutivo proporciona uma maior interoperabilidade, acessibilidade, facilidade de manutenção e ganho de tempo no desenvolvimento de seus códigos.

Unobtrusify.com

Foi pensando nisso que Phil Hawksworth desenvolveu uma página muito simples para mostrar que ao utilizar técnicas de Progressive enhancement você está garantindo assim total acesso a qualquer dispositivo.

Abaixo vocês podem ver um exemplo de como o site funciona corretamente em qualquer dispositivo. Essa é uma screenshot que tirei no Openwave Simulator:

Openwave Simulator
Páginas:«1...891011121314...24»