7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. CodePen

Dica Rápida: Adicione Arquivo CSS com @supports Nas Demos do CodePen

Read Time: 3 mins

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

Quando as demos no CodePen usarem CSS de ponta, é bom avisar sobre isso. Proveremos uma notificação quando os navegadores não suportarem nossas demos, usando a regra @support para criar um recurso útil e reutilizável no CodePen.

Resultado Final

Eis o que obteremos: uma notificação reutilizável que avisa do CSS não suportado. Será mantida quase por inteiro em sua própria pen, a qual podemos adicionar a outras demos via link Externo de CSS:

Você verá que a usamos nos tutoriais de CSS do Tuts+, como:

A Regra @supports

CSS @supports tem estado por aí faz uns anos e tem um bom suporte dos navegadores. Ela permite realizarmos consultas de recursos, aplicando CSS somente se alguma propriedade específica existir no navegador. Isso previne estilo executados pela metade ou até mostrar avisos caso queiramos.

Funciona envolvendo declarações de estilo em uma condição:

Notificações

Criemos rapidamente algums notificações:

Adicionamos o conteúdo textual via pseudo elemento para controlarmo-no em um único lugar. Esses rótulos serão usados em várias demos, logo, mantê-los separado permite-nos alterá-los todos de uma só vez.

Podemos estilizá-las como quiser.

Adicionando a Condição @supports

Nossas notificações são visíveis por padrão, mas a queremos apenas quando suas respectivas propriedades não forem suportadas. Adicionemos um condicional para isso:

Aqui dizemos "se initial-letter ou -webkit-initial-letter forem suportadas, não mostre a notificação .support-initial-letter".

E repetimos esse processo para cada notificação, obtendo a pen a seguir:

Quantas notificações aparecem?

Reutilização Como Recurso Externo do CodePen

Com nossa pen salva, podemos referenciá-la em outras pens, obtendo um recurso externo super útil. Adicionemo-na a uma nova pen como arquivo CSS externo:

Isso trará apenas o CSS, ignorando qualquer HTML ou JS que tivermos, então, adicionemos quaisquer elementos de notificação que precisamos no HTML da nova pen:

E está pronto! Sempre que atualizarmos a pen @supports, essas alterações refletirão em todas as demos que a usarmos.

Conclusão

É possível ver várias pens usando essas notificações com @supports. Jen Simmons usa, a Rachel Andrew também e nós até nós usamos. Buscar os estilos da notificação de uma pen externa é a maneira perfeita de administrar as coisas enquanto mantemos o código limpo. Atualizar as mensagens, adicionar novas propriedades CSS, aplicar marcas.. A escolha é nossa! Deixe um comentário explicando como usa @supports.

Recursos Adicionais

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.