Vamos falar de HTML 5 - Atributo "ContentEditable"_

Vi um post do Bernard De Luna no iMasters falando sobre um CMS WYSIWYG (nossa, quanta letra solta!) chamado checkthis, onde ele fala de um atributo do HTML 5 chamado "ContentEditable" (clique para ver a documentação), como eu não conhecia, decidi ver como esse atributo funciona e ele é bem simples: Permite a alteração do conteúdo de uma página HTML.

Para usar essa funcionalidade, é só colocar o atributo ContentEditable no seu elemento ex.: 
<p contenteditable>Seu texto</p>


Você também pode permitir a edição de todos os elementos filhos se declarar que o elemento vai herdar a propriedade do pai:
<div contenteditable="true">

<h3 contenteditable="inherit">Seu titulo</h3>

<p contenteditable="inherit">Seu parágrafo</p>

</div>


...Você pode editar esse texto, tente!...

Mas claro, o conteúdo alterado não será salvo a não ser que você utilize código back-end ou o localStorage do HTML 5.
Esse atributo permite que seja desenvolvido páginas com uma maior interação do usuário mantendo a elegância e o design sem ser trabalhoso!

Mas sempre que falamos de HTML 5, vem a cabeça "é cross-browser?".
É ai que vem a parte boa, o ContentEditable é suportado por todos os maiores browsers, isso inclui todos IE's (é, também não acreditei!), FF, Chrome, Safari, Opera e até alguns mobiles! Veja a relação completa aqui!

E você? Está pensando onde pode aplicar esse atributo no seu dia-a-dia?

Comentarios

Comente você tambem

Tecnologia do Blogger.