CSS Debug Tools

Postado por: Pedro Rogério em
  • 26 ago
  • 3

Possuir boas ferramentas para o desenvolvimento web, é essencial, portanto, a primeira coisa que você desenvolvedor web deve fazer é utilizar um bom browser como padrão, recomendo o Firefox, você deve testar seus sites em outros browsers também, isso é óbvio, mas sempre desenvolva primeiro para o Firefox, depois para os outros browsers. Porque?

Firefox é um browsers Standard Compliance, ou seja, segue a risca os padrões web, e ainda você possui a possibilidade de instalar extensões que podem lhe auxiliar no desenvolvimento. Se você possui somente o Internet Explorer instalado no micro, baixe o Firefox agora.

Extensões Firefox que auxiliam no desenvolvimento

Web Developer Toolbar é muito útil por mais de 100 motivos diferentes, você pode, por exemplo, editar o CSS dessa página com essa extensão.

Web Developer Toolbar

CSSViewer lhe proporciona a possibilidade de visualizar as propriedades CSS aplicadas a qualquer elemento na página de uma forma simples e clara.

CSS Viewer

CSS Debug Toggle Bookmarklet permite visualizar toda a estrutura da página com um só clique. Adicione esse link aos seus favoritos para um acesso rápido.

CSS Debugger

Firebug é a ferramenta utilizada por 9 em cada 10 desenvolvedores web, ele integra a possibilidade de você editar, debugar e monitorar, HTML, CSS e JavaScript em tempo real em uma página web

Firebug

Compatiblidade CSS no Internet Explorer

Postado por: Pedro Rogério em
  • 25 ago
  • 4

O Internet Explorer é um browser que possui suporte precário a CSS, a própria Microsoft reconhece isso, pois em seu site você pode ver uma lista com todas as propriedades CSS suportadas pelo Internet Explorer desde a versão 5.0 até a versão 8.

Por exemplo, hoje o Internet Explorer 6 possui total suporte as especificações CSS nível 1, e sua futura versão 8 terá total suporte a CSS nível 2.1, e algumas propriedades CSS 3. Só é triste ver que coisas tão interessantes, que ajudariam e muito no desenvolvimento web, ainda não são suportadas.

Tabela de Compatibilidade CSS no Internet Explorer

Adicionar ícones a links externos

Postado por: Pedro Rogério em
  • 21 ago
  • 1

Mostrar ao usuário de forma criativa que determinado link de seu site faz referência a outro, é uma boa regra de usabilidade, você pode fazer isso com CSS, de uma forma bem simples, mas infelizmente não irá funcionar no Internet Explorer, ou você pode fazer isso através de JavaScript. Caso você não seja ninja nessa arte, pode fazer isso facilmente com jQuery.

O que basicamente é feito pelo JavaScript é testar se o location.hostname, o link do hostname, é o mesmo representado no this.hostname. Basicamente ele efetua o seguinte teste: this.hostname && location.hostname !== this.hostname.

A função filter()

Nesse exemplo vamos utilizar a função filter() para testar todos os nossos links, vejam uma descrição do script abaixo:

$(document).ready(function() {
  		$('a').filter(function() {
		return this.hostname && this.hostname !== location.hostname;
  		}).after(' <img src="external.png" alt="external link" />');
	});

A função irá verificar os links, e se achar algum link externo ao meu site, adiciona-rá uma imagem indicando isso. Exemplo do script em ação.

Esse tutorial é uma adptação do original de: Learning jQuery.

Håkon Wium Lie – O Criador das CSS

Postado por: Pedro Rogério em
  • 20 ago
  • 12

Håkon Wium Lie

Não é possível falar de CSS sem antes conhecermos um pouco sobre seu criador, Håkon Wium Lie. Ele é um Norueguês, de nome complicado, que veio ao mundo para mudar a forma de desenvolvimento para a Web. Antigamente, os desenvolvedores conseguiam formatar suas páginas utilizando títulos e parágrafos, mas isso não era o suficiente, e no ano de 1994, ele propôs a criação das CSS, trabalhando em conjunto com Tim Berners-Lee e Robert Cailliau.

Já trabalhou em empresas como: YesLogic, INTBAU, Skarpsno vel, onde atualmente trabalha na empresa Opera Software, onde é chefe de tecnologia.

Se surgiu interesse em saber mais sobre a vida de Håkon Wium Lie, seria interessante você dar uma olhada nos seguintes links:

Border-image no Firefox 3.1

Postado por: Pedro Rogério em
  • 19 ago
  • 7

John Resig nos mostra em seu blog que a próxima versão do Firefox, a 3.1 atribuirá a capacidade de utilizar o atributo CSS3 border-image. Com essa especificação, podemos adicionar imagens as bordas, ao invés de hoje em dia onde só utilizamos cores:

Border-image no firefox 3.1

Seu uso consiste no seguinte código:

border-image: url(border.png) 27 27 27 27 round round;

Border-image no firefox 3.1

Atualmente, essa especificação funciona somente no Safari, e na versão pre de Firefox 3.1.

Leia mais:

Páginas:«1...1516171819202122»