Ferramentas para desenvolvedores · Editor HTML WYSIWYG
Das tags <font> para CSS: como a formatação da Web saiu da marcação
· Fundo
HTML css limpeza de texto
Relata como HTML de apresentação, como atributos de fonte, centralização e alinhamento, deram lugar a CSS, e por que essa história explica o atual debate de estilo inline nos editores.
Apresentacional HTML em páginas mais antigas – nenhuma reivindicação de data é fornecida aqui
Fragmentos de páginas mais antigas geralmente expressam a aparência diretamente por meio de elementos como fonte e centro ou atributos como bgcolor e alinhamento. A pasta de trabalho anexa uma cronologia de meados da década de 1990, mas nenhuma fonte de repositório verifica essas datas. A implementação pode apenas demonstrar como este editor trata tal marcação hoje.
ToolAcre não permite fonte ou centralização e não preserva atributos de apresentação. Os wrappers comuns não suportados são desembrulhados, portanto suas palavras visíveis podem sobreviver enquanto a instrução de formatação desaparece. Essa saída é um rascunho limpo, não uma restauração fiel de uma página legada.
fonte, centro e bgcolor: apresentação nas tags — descreve os elementos e atributos adicionados pelos navegadores para aparência
Quando a apresentação reside em tags e atributos, o conteúdo e o design tornam-se difíceis de alterar de forma independente. Uma escolha de cor repetida nos artigos deve ser editada em cada fragmento, e um título centralizado não tem significado estrutural inerente. Copiar essas construções também importa suposições de um layout obsoleto.
A marcação semântica nomeia funções como título, parágrafo, lista e citação. A folha de estilo de destino pode apresentar todas as ocorrências de forma consistente. ToolAcre suporta esse vocabulário menor e também remove classe e estilo, deixando o sistema receptor responsável por sua própria camada de apresentação.
CSS separa estrutura da apresentação; as datas dos padrões estão fora das evidências do repositório
CSS fornece seletores e declarações separados da árvore de conteúdo. Essa divisão arquitetônica permite que uma mudança de design afete muitos documentos sem reescrever cada corpo. Este artigo não inventa uma data para a primeira recomendação ou uma sequência de padrões porque tais afirmações históricas exigem especificações externas.
A regra prática permanece testável: fragmentos copiados de ToolAcre não contêm atributos de estilo ou nomes de classe. O documento completo baixado inclui a própria folha de estilo wrapper de ToolAcre, mas esse CSS não é inserido no fragmento higienizado retornado pela cópia HTML.
Os elementos de apresentação estão fora desta lista de permissões, sem uma reivindicação de cronologia do padrão de vida
A apostila descreve a depreciação e a remoção de um padrão de vida. Este módulo não possui arquivo de padrões, portanto o artigo se detém na política atual: os elementos de apresentação não são suportados e são desembrulhados ou removidos de acordo com sua categoria de risco. Não faz uma afirmação de cronologia normativa.
O relatório de remoção é a prova útil. Cole uma tag de fonte ao redor do texto e observe que o wrapper é rejeitado enquanto as palavras permanecem. Cole um contêiner de estilo perigoso e seu corpo será removido inteiro, porque o conteúdo de estilo bruto pode criar solicitações e superfícies de análise além do escopo deste editor.
Os estilos embutidos existem em outros lugares, mas este editor os remove
O estilo embutido é um mecanismo de sintaxe moderno, mas ToolAcre o recusa completamente. Portanto, este editor não pode demonstrar um atributo de estilo de “compromisso” sobrevivente ou recomendar um de seus próprios modos de saída. O único estilo independente aparece no documento de visualização gerado em torno do corpo filtrado HTML.
Outros contextos, especialmente a produção de e-mail, podem exigir declarações inline. Esse requisito exige um pipeline separado com testes de cliente e política CSS. Adicionar um estilo arbitrário aqui contradiria a lista de permissões atual e ampliaria as responsabilidades do desinfetante sem evidências ou testes.
Exemplo resolvido: modernizando um trecho da década de 1990 - reescreve a marcação font-tag como semântica HTML mais uma classe e compara os dois
Modernize `<center><font color="red"><b>Maintenance</b></font></center><p align="left">Tonight</p>` escolhendo um título e um parágrafo reais. ToolAcre desembrulha a apresentação não suportada, mapeia b para forte, remove o alinhamento e retém p, mas não pode inferir que a Manutenção deveria ser h2.
Reescreva o significado explicitamente como `<h2>Maintenance</h2><p>Tonight</p>` e adicione classes de destino aprovadas ou regras de folha de estilo fora do editor. Se a importância for intencional dentro de uma frase, forte pode ser adequado; se negrito fosse apenas uma espessura de fonte, não retenha uma semântica enganosa.
O que isso não cobre — debates sobre metodologia CSS ou estilo específico da estrutura
Este artigo não compara metodologias, estruturas, classes de utilitários ou tokens de design CSS. Ele não reivindica datas históricas para fontes, CSS ou transições de padrões. Ele também não oferece um conversor automatizado que possa inferir funções semânticas a partir da marcação visual legada.
A filtragem não é uma prevenção XSS universal. O tokenizador manuscrito de ToolAcre é restrito e sua visualização é colocada em sandbox separadamente. Um servidor que aceita HTML herdado ou gerado pelo usuário precisa de um sanitizador baseado em analisador mantido, testes de migração e uma lista de permissões específica do destino.
Conclusão: saiba por que a regra existe — resume o histórico e como a inspeção da saída no editor HTML WYSIWYG de ToolAcre ajuda a manter a apresentação fora de sua marcação
Saiba por que a estrutura e a apresentação estão separadas: o significado deve sobreviver ao redesenho, enquanto a aparência deve ser governada de forma consistente. ToolAcre impõe esse limite de forma agressiva, removendo a apresentação legada e o estilo moderno embutido ou baseado em classe dos fragmentos copiados.
Use a visualização de origem para identificar o que foi perdido e, em seguida, restaure a semântica manualmente e o estilo no destino. Esse processo pode não preservar a aparência antiga, mas produz conteúdo mais fácil de revisar, migrar e adaptar, sem levar decisões obsoletas a todos os temas futuros.