Sobre este problema HTML
Em HTML, os atributos booleanos como allowfullscreen, disabled, readonly e hidden funcionam de forma diferente do que muitos programadores esperam. A sua mera presença num elemento significa “true”, e a sua ausência significa “false”. Os únicos valores válidos para um atributo booleano são a string vazia ("") ou o próprio nome do atributo (por exemplo, allowfullscreen="allowfullscreen"). Definir um atributo booleano como "true" não é HTML válido de acordo com o padrão HTML living da WHATWG, mesmo que os browsers tipicamente ainda o interpretem como ativado.
Isto é importante por várias razões. Primeiro, viola a especificação HTML e produzirá um erro de validação do W3C. Segundo, pode criar confusão para outros programadores que podem assumir que definir o atributo como "false" o desativaria — mas não é assim que os atributos booleanos funcionam. Definir allowfullscreen="false" ainda ativaria o ecrã completo porque o atributo está presente. Manter a sua marcação válida e semanticamente correta evita estes mal-entendidos e garante compatibilidade futura com browsers e ferramentas.
Vale também a pena notar que allowfullscreen é agora considerado um atributo legado. A abordagem moderna é usar o atributo allow com o token de permissão "fullscreen", que faz parte do mecanismo mais amplo de Permissions Policy. O atributo allow dá-lhe controlo granular sobre múltiplas funcionalidades num único atributo.
Exemplos
Incorreto: atributo booleano definido como “true”
Isto desencadeia o erro de validação porque "true" não é um valor válido para um atributo booleano.
<iframe src="https://example.com" allowfullscreen="true"></iframe>Correto: atributo booleano sem valor
Simplesmente inclua o nome do atributo sem qualquer atribuição de valor.
<iframe src="https://example.com" allowfullscreen></iframe>Também correto: atributo booleano com uma string vazia
A string vazia é um valor válido para qualquer atributo booleano.
<iframe src="https://example.com" allowfullscreen=""></iframe>Também correto: atributo booleano definido com o seu próprio nome
Segundo a especificação, um atributo booleano pode ser definido com uma correspondência insensível a maiúsculas/minúsculas do seu próprio nome.
<iframe src="https://example.com" allowfullscreen="allowfullscreen"></iframe>
Recomendado: usando o atributo moderno allow
O atributo allow é a abordagem preferida daqui para a frente. Substitui allowfullscreen e também pode controlar outras permissões como câmara, microfone e mais.
<iframe src="https://example.com" allow="fullscreen"></iframe>
Pode combinar múltiplas permissões num único atributo allow:
<iframe src="https://example.com" allow="fullscreen; camera; microphone"></iframe>Erro comum: tentar desativar com “false”
Esteja ciente de que o seguinte não desativa o ecrã completo — o atributo ainda está presente, portanto o ecrã completo ainda é permitido. Isto também produziria um erro de validação.
<!-- Isto NÃO desativa o ecrã completo — e é HTML inválido -->
<iframe src="https://example.com" allowfullscreen="false"></iframe>Para desativar o ecrã completo, simplesmente omita o atributo por completo:
<iframe src="https://example.com"></iframe>Encontre problemas como este automaticamente
O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.