Edição e configuração de CSS – Ferramentas para browsers

Com o desenvolvimento web voltado para webstandart e focado em tabless tornou-se imprescindível a utilização de ferramentas de visualização de conteúdo via browser.

Abaixo apresento uma lista de extensões para Firefox que poderão facilitar consideravelmente o trabalho com CSS, especialmente no que tange à identificação e visualização dos elementos da página.

Entre todas, recomendo especificamente o Firebug para iniciar o trabalho e o Web Developer para tarefas mais avançadas, por ser um das extensões mais valiosas e facilitatoras do processo de criação para web.

Firebug – https://addons.mozilla.org/en-US/firefox/addon/1843
You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page

Web Developer – https://addons.mozilla.org/en-US/firefox/addon/60
Adds a menu and a toolbar with various web developer tools.

EditCSS – https://addons.mozilla.org/en-US/firefox/addon/179
Stylesheet modifier in the Sidebar

CSSMate – https://addons.mozilla.org/en-US/firefox/addon/4187
a port of the fantastic EditCSS

View formatted source (format source extension) – https://addons.mozilla.org/en-US/firefox/addon/697
Displays formatted and color-coded source and optional CSS information for each element.

X-Ray – https://addons.mozilla.org/en-US/firefox/addon/1802
See the tags on a page without viewing the sourcecode

CSSViewer – https://addons.mozilla.org/en-US/firefox/addon/2104
A simple CSS property viewer

View Source Choice – https://addons.mozilla.org/en-US/firefox/addon/2070
View Page Source in a variety of contexts

JSView – https://addons.mozilla.org/en-US/firefox/addon/2076
Ability to view the source code of external files. You can now view the embedded css and js as well.

ViewSourceWith – https://addons.mozilla.org/en-US/firefox/addon/394
The main goal consists to view page source with external applications but you can also…
- open page source as DOM document, read faq
- open CSS and JS files present on page

Console² – https://addons.mozilla.org/en-US/firefox/addon/1815
Console² let’s you display errors filtered by type (Errors, Warnings, Messages), language (JavaScript, CSS, XML) and context (Chrome, Content).

View Dependencies – https://addons.mozilla.org/en-US/firefox/addon/2214
Lists all the files which were loaded to show the current page

View Source Chart – https://addons.mozilla.org/en-US/firefox/addon/655
Source Charting… Graphically Displays HTML Tag Boundaries, graphically Defines Tag Nesting Order, Structure and Hierarchy

SourceEditor – https://addons.mozilla.org/en-US/firefox/addon/1760
View and Edit source of HTML element

InspectThis – https://addons.mozilla.org/en-US/firefox/addon/1913
Inspect the current element with the DOM Inspector

Cores
Rainbowpicker – https://addons.mozilla.org/en-US/firefox/addon/1693
Pick any color of the rainbow

FireCal – https://addons.mozilla.org/en-US/firefox/addon/3747
Colour Picker and Converter

ColorZilla – https://addons.mozilla.org/en-US/fir…don/271?id=271
Advanced Eyedropper, ColorPicker, Page Zoomer

Medidas
MeasureIt – https://addons.mozilla.org/en-US/firefox/addon/539
Draw out a ruler to get the pixel width and height of any elements on a webpage

Window Resizer – https://addons.mozilla.org/en-US/firefox/addon/1985
Resize your browser to various standard resolution sizes

Validação:
CSS validator – https://addons.mozilla.org/en-US/firefox/addon/2289
HTML Validator (based on CSE HTML Validator) – https://addons.mozilla.org/en-US/firefox/addon/887
Total Validator – https://addons.mozilla.org/en-US/firefox/addon/2318
Validaty – https://addons.mozilla.org/en-US/firefox/addon/2609
Page validator – https://addons.mozilla.org/en-US/firefox/addon/2250
Offline Page validator – https://addons.mozilla.org/en-US/firefox/addon/2520

O que é Acid 2?

Atualmente, muito tem se falado sobre Acid 2.

Este termo tem aparecido com certa frequência quando lemos artigos sobre o desenvolvimento de browsers e suas novas versões. Sobretudo, as versões que ainda estão por vir do IE 8 (Internet Explorer 8) e seu concorrente, o Firefox 3.

A próxima versão do navegador da Microsoft deverá passar no teste de compatibilidade Acid 2, é o que garantem os desenvolvedores da Microsoft.

O Acid 2, criado pelo Web Standards Project (WaSP), é uma bateria de testes que verificam a compatibilidade do navegador com alguns dos padrões oficiais da web. Quando a compatibilidade é de 100%, surge uma carinha sorridente na tela. Se houver itens não compatíveis, a carinha aparece degenerada ou parte da página é pintada de vermelho.

Até agora nenhuma versão do IE foi capaz de passar pelo teste com sucesso. O Firefox, em sua atual versão 2, também falha no Acid 2. Mas o Firefox 3, que está em fase beta, deverá passar. E os navegadores Safari e Opera passam com louvor no Acid 2.

No final de dezembro, a equipe de desenvolvimento do IE8 anunciou que havia conseguido fazer uma versão alfa ser aprovada no Acid 2. Se isso se confirmar na versão final, a notícia é muito boa, especialmente para quem desenvolve sites. Com todos os principais navegadores aderindo ao conjunto de padrões adotados pela WaSP, bastará seguir esses padrões para que o site seja corretamente exibido em qualquer navegador.

Estatíticas de acesso ao site da WordPress.com

Publicado ontem algumas estatísticas sobre os acessos ao WordPress.com, referente ao browser e sistema operacional utilizados pelos visitantes. Foram mais de 115 milhões de acessos – impressionante!

Para os desenvolvedores, vale observar.

Browsers:

• 62.46% – Internet Explorer (64.10% V.6, 35.17% V.7 e 0.28% V.5);
• 30.74% – Firefox;
• 3.83% – Safari;
• 1.78% – Opera, e
• 0.52% – Mozilla.

Sistemas operacionais:

• 90.36% – Windows;
• 6.73% – Macintosh;
• 2.19% – Linux;
• 0.03% – PlayStation Portable

Vale ressaltar o grande domínio do navegador da Microsoft, apesar dos últimos avanços do Mozilla Firefox.