CSS Avançado

Menu

Próxima página
Página anterior

POST CSS

É um ecossistema de plugins personalizados e de ferramentas.
Existe mais de 200 plugins e é possível criar mais.
Pode ser usado como pré ou pós processador.
Como pós processador, você não terá muito controle do que será feito,
diferente do que é feito com o Less ou Sass.

* Como existe vários plugins, cabe a você decidir qual vai querer usar,
quase todos possuem uma boa documentação, para ter mais informações.

POST CSS Exemplo de como seria o funcionamento

** Entrada

p {
_______display: flex;
}
** Saida

p {
_______display: -webkit-box;
_______display: -ms-flebox;
_______display: flex;
}

Na saida ele criou mais dois css diferentes do que eu adicionei,
a vantagem dele fazer é que mais navegadores leia o CSS.

Terá muito mais chances de funcionar em vários navegadores,
mas não é certeza que todos funcionaram.

É bom testar em vários navegadores, o seu projeto.

POST CSS Documentação e mais detalhes

É uma para transaformar CSS com JavaScript.
** Não precisa saber a linguagem JavaScript.

No desenvolvimento podemos usar conceitos já apresentados neste curso,
visando evitar: repetição de código, reuso, código limpo, organizado de fácil manutenção.

O uso pode ser:
* Atráves de linhas de comando ou taskrunners.

É sempre importante consultar as documentações para entender,
e tirar melhores benefícios.

Para usar com Node.js npm install postcss-middleware .

Links para ver as documentações:
https://github.com/jednano/postcss-middleware

https://github.com/postcss/postcss

https://www.postcss.parts/

https://postcss.org/

Consulte as documentações, veja qual é mais adequado para seu projeto.

POST CSS Plugins

Há muitos plugins, mais veremos 3.

PostCSS Brazilian Portuguese Stylesheets
https://www.npmjs.com/package/postcss-brazilian-portuguese-stylesheets

* Faz uma conversão.

* Ajuda a quem não entende nada de inglês e está no início.
* Permite a programação em português e processa para CSS.

Veja um exemplo, que está no site da documentação:
print da página de documentação do site, mostrando um exemplo de como funciona o plugin.


Outro plugin, funciona como um pré processador:
Autoprefixer
https://autoprefixer.github.io/

* Dizem ser o mais utilizado, usado pelo Google e Twitter por exemplo.

Documentação no github:
https://github.com/postcss/autoprefixer

Veja a imagem de um exemplo de entrada e saida de um código usando o Autoprefixer:
print da página de documentação do site, mostrando um exemplo de entrada de um código css.

** Saida, como fica o código depois de usar o Autoprefixer:
print da página de documentação do site, mostrando um exemplo de como fica o código depois de usar o Autoprefixer.


Outro plugin, para ver aplicação de regras:
Canisue
https://caniuse.com/

* Para você pesquisar quais navegadores tem suporte aquilo que você quer usar.
* Tipo, você pesquisa sobre 'margin', o site te dará informações,
não só de margin, mas margin-top, margin-block, entre outros.
E te dará informações de quais navegadores suportam ou não, o margin ou margin + alguma coisa.


Outro plugin, para válida e revisa códigos CSS:
Stylelint
https://stylelint.io/

* Básicamente fará a correção.
* Erros de digitação, entre outros para não fazer nada errado.

Próxima página

Página anterior