Recomendados
Mais conteúdo relacionado
Semelhante a CSS custom properties
Semelhante a CSS custom properties (20)
Último
Último (8)
CSS custom properties
- 1. CSS CUSTOM PROPERTIES <usando variáveis no CSS de forma nativa>
- 2. Quem sou eu? https://github.com/talitaoliveira https://br.linkedin.com/in/litaaoliveira <?php $nome = “Talita Oliveira”; $idade = 25; $formacao = array( “Graduada em Sistemas de Informação na AESO”, “Pós Graduanda em Des. Web Apps com Tec. Front End na Unibratec”) $job_atual = “Programadora no SJCC”; @liitacherry
- 3. Ué.. Talita agora é Front?
- 4. Por que não os dois?
- 5. Enfim :P
- 6. O que são custom properties?
- 7. Porque usar?
- 9. E se quiséssemos mudar as cores do tema?
- 13. COM VARIÁVEIS NATIVAS DO CSS! /* alert(‘o/’) */
- 14. --nome-variavel
- 17. Seletor :root
- 21. Cascata
- 22. Inline
- 23. Herança
- 25. Fallback
- 28. E quando o browser não suporta?
- 31. Dá pra manipular com Javascript!
- 32. Can I Use?
- 34. CSS Cast Show - by Afonso Pacifer: https://www.youtube.com/playlist?list=PLgcWRW66amTnK9RhsViFHd3B7- pUW02U1 W3C: https://www.w3.org/TR/css-variables/ MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/--* Algumas referencias:
- 35. Então, é isso. o/ Obrigada :)
Notas do Editor
- #2
- Eu considero a parte que estudo front um hobbie meu, é uma coisa que gosto… Só não é tipo algo muito diferente do que faço tipo, gente que é programador e tem como hobbie, sei lá aprender qualquer outra coisa que gosta… Eu poderia ter como hobbie, cozinhar, ou qualquer coisa que eu também precisasse de um aprendizado… Então.. (proximo slide)
- Por que não os dois? Eu gosto de front… e se algum dia eu ganhar dinheiro com isso também, melhor ainda.. Então por enquanto eu trabalho com back end, e sempre estudando pois ainda tenho muito que melhorar, e sempre que tô afim também estudo algumas coisas de front.. Tanto é que tô fazendo pós em front… mas enfim (proximo slide)
- Propriedades customizadas pelo autor do arquivo CSS, que podem ser atribudos valores a essas propriedades. Utilizando um nome escolhido pelo autor e um valor, que vai poder ser alterado ao longo do arquivo caso necessário.
- Muitos valores em um arquivo CSS são repetidos, por exemplo em um site pode ter um determinado esquema de cores que pode se repetir em vários elementos, e caso um dia precise alterar dependendo de como o arquivo estiver estruturado pode ser muito custoso.
- Como esse é um layout pequeno, não é tao dificil assim mudar as cores.. Mas imagina um site grande, cheio de elementos com cores iguais.. Certamente para alterar as cores seria bem custoso, sair procurando pelo arquivo de css onde tem aquela cor e alterar..
- Para poder usar a variavel, chamamos a função var, e passamos a variavel como parametro
- Uma pseudoclasse que é bastante util pra declarar css variables com escopo global, no caso as variaveis declaradas no root (que seria a raiz do documento) podem ser acessadas em qualquer parte do arquivo
- Css variables seguem a regra de cascata. Que agente declara a variavel por exemplo no seletor root, mas você pode redefinir o valor dessa variavel sempre que quiser, mas no caso muda apenas no escopo que ela esta sendo mudada,
- Usado quando tem a chamada de uma variável css que basicamente não foi declarada ou foi especificada em outro escopo e não pode ser acessada por herança.
- Então vocÊ passa o valor como segundo elemento na função var… no caso, se ele não achar a variavel ele pega essse segundo valor que foi definido
- Aquele fallback não vai solucionar o problema de quando o browser não suporta css variables, então um “fallback” alternativo é definir o valor da propriedadde antes de chamar a variavel
- Fica estranho? Sim, mas por enquanto que todos os browsers ainda não suportam, serve para que seu site não quebre para algumas pessoas.. E temos que fazer que não quebre, que todos possam ver...
- variaveis de pre processadores só existem em ambiente de desnvolvimento, no caso quando fazemos a compilação do css feito com pre processador elas deixam de existir.. Já as Custom properties não, já que não é preciso de um pre-processador elas existem também em ambiente de produção, o que dá possibilidade de manipula-las via javascript