@designliquido/foles
Version:
Linguagem de folhas de estilo para documentos em geral em português
423 lines (364 loc) • 115 kB
Markdown
# FolEs
<p align="center">
<img src="./recursos/imagens/icone-foles.png" alt="FolEs" width="auto" height="268px">
<p align="center">
Linguagem de Folhas de Estilo em Português, para geração de CSS.
</p>
<p align="center">
<img src="./recursos/imagens/badge-statements.svg" />
<img src="./recursos/imagens/badge-lines.svg" />
<img src="./recursos/imagens/badge-functions.svg" />
<img src="./recursos/imagens/badge-branches.svg" />
<a href="https://github.com/DesignLiquido/FolEs/issues" target="_blank">
<img src="https://img.shields.io/github/issues/Designliquido/FolEs" />
</a>
<img src="https://img.shields.io/github/stars/Designliquido/FolEs" />
<img src="https://img.shields.io/github/forks/Designliquido/FolEs" />
<a href="https://www.npmjs.com/package/@designliquido/foles" target="_blank">
<img src="https://img.shields.io/npm/v/@designliquido/foles" />
</a>
<img src="https://img.shields.io/github/license/Designliquido/FolEs" />
</p>
<p align="center">
Acompanhe a Design Líquido nas redes sociais:
</p>
<p align="center">
<a href="https://twitter.com/designliquido" target="_blank"><img src="https://img.shields.io/static/v1?style=for-the-badge&message=Twitter&color=1DA1F2&logo=Twitter&logoColor=FFFFFF&label=" /></a>
<a href="https://www.instagram.com/design.liquido" target="_blank"><img src="https://img.shields.io/static/v1?style=for-the-badge&message=Instagram&color=E4405F&logo=Instagram&logoColor=FFFFFF&label=" /></a>
<a href="https://www.youtube.com/channel/UCJRn3B7r0aex6LCaOyrQtZQ" target="_blank"><img src="https://img.shields.io/static/v1?style=for-the-badge&message=YouTube&color=FF0000&logo=YouTube&logoColor=FFFFFF&label=" /></a>
<a href="https://www.linkedin.com/company/design-liquido" target="_blank"><img src="https://img.shields.io/static/v1?style=for-the-badge&message=LinkedIn&color=0A66C2&logo=LinkedIn&logoColor=FFFFFF&label=" /></a>
<a href="https://www.tiktok.com/@designliquido" target="_blank"><img src="https://img.shields.io/static/v1?style=for-the-badge&message=TikTok&color=000000&logo=TikTok&logoColor=FFFFFF&label=" /></a>
</p>
</p>
## Motivação
Assim como linguagens de programação e de marcação, linguagens de estilo como CSS podem ser difíceis de aprender em português.
FolEs começa do mesmo ponto que [SASS](https://sass-lang.com/), como uma linguagem de extensão que gera CSS. A base de CSS é HTML. A base de FolEs é [LMHT](https://github.com/DesignLiquido/LMHT).
Adicionalmente, FolEs possui um recurso de tradução reversa. Em outras palavras, FolEs pode ingerir um arquivo CSS e devolver seu correspondente em FolEs.
## Demonstração online
FolEs tem uma demonstração online juntamente com LMHT: https://designliquido.github.io/foles-demo-web.
## Exemplos
Se queremos definir estilos para um documento inteiro, podemos usar:
```
lmht {
tamanho-fonte: 12px;
}
```
Isso traduz para o seguinte CSS:
```css
html {
font-size: 12px;
}
```
## Instalação
Para instalar FolEs globalmente, use o seguinte comando:
```sh
npm i -g @designliquido/foles
```
## Execução
Após instalar globalmente pelo npm, para executar FolEs traduzindo um arquivo chamado `exemplo.foles`, use:
```sh
foles exemplo.foles
```
Para tradução reversa:
```sh
foles exemplo.css
```
### VSCode
No Visual Studio Code, adicione no seu `launch.json` o seguinte:
```jsonc
"configurations": [
{
"type": "node",
"request": "launch",
"name": "FolEs",
"skipFiles": ["<node_internals>/**", "node_modules/**"],
"cwd": "${workspaceRoot}",
"console": "integratedTerminal",
"args": [
"${workspaceFolder}${pathSeparator}execucao.ts",
"${workspaceFolder}${pathSeparator}exemplos${pathSeparator}exemplo.foles"
],
"runtimeExecutable": "node",
"runtimeArgs": ["--nolazy", "-r", "ts-node/register/transpile-only"]
},
]
```
## Arquitetura
FolEs copia vários elementos de [Delégua](https://github.com/DesignLiquido/delegua), como um Lexador e um Avaliador Sintático, mas contém um elemento original (um Tradutor, que usa o retorno do Avaliador Sintático para gerar uma folha de estilo em CSS).
### Seletores
Um seletor é uma expressão que encontra N elementos em um documento LMHT que possuem certas características, como por exemplo o nome de uma estrutura, um id, uma classe e atributos dessa estrutura. Por exemplo:
```foles
ligacao {
}
```
Encontra todas as estruturas de um documento LMHT cujo nome da estrutura seja ligação:
```xml
<lmht>
<cabeça>
</cabeça>
<corpo>
<ligacao destino="https://github.com/DesignLiquido">GitHub da Design Líquido</ligacao>
<ligacao destino="https://github.com/DesignLiquido/delegua">Linguagem Delégua</ligacao>
<ligacao destino="https://github.com/DesignLiquido/FolEs">Linguagem FolEs</ligacao>
</corpo>
</lmht>
```
Neste exemplo, portanto, irá encontrar três estruturas.
Podemos ainda selecionar por um identificador único:
```foles
#ligacao1 {
}
```
Para o exemplo modificado:
```xml
<lmht>
<cabeça>
</cabeça>
<corpo>
<ligacao id="ligacao1" destino="https://github.com/DesignLiquido">GitHub da Design Líquido</ligacao>
<ligacao id="ligacao2" destino="https://github.com/DesignLiquido/delegua">Linguagem Delégua</ligacao>
<ligacao id="ligacao3" destino="https://github.com/DesignLiquido/FolEs">Linguagem FolEs</ligacao>
</corpo>
</lmht>
```
Iremos encontrar uma estrutura. Ainda, podemos usar algo assim:
```foles
.minhaligacao {
}
```
E modificar o exemplo mais uma vez:
```xml
<lmht>
<cabeça>
</cabeça>
<corpo>
<ligacao classe="minhaligacao" destino="https://github.com/DesignLiquido">GitHub da Design Líquido</ligacao>
<ligacao classe="outraligacao" destino="https://github.com/DesignLiquido/delegua">Linguagem Delégua</ligacao>
<ligacao classe="minhaligacao" destino="https://github.com/DesignLiquido/FolEs">Linguagem FolEs</ligacao>
</corpo>
</lmht>
```
E encontraremos apenas duas das três estruturas.
### Modificadores
Um modificador é toda e qualquer propriedade declarada no escopo de um seletor que irá causar uma modificação em estruturas de um documento. Voltando ao exemplo da seção anterior:
```foles
ligacao {
tamanho-fonte: 16px;
}
```
Se aplicamos este estilo ao documento do primeiro exemplo, todas as três estruturas receberão uma modificação de estilo, ou seja o tamanho da fonte (texto) passa a ter o tamanho de 16 pixels.
### Atributos de Modificadores: Valores, Quantificadores e Qualitativos
FolEs trabalha com três conceitos de atributos em todas as etapas dos ciclos de ingestão de arquivos:
- **Valores**: são os atributos que acompanham modificadores. No exemplo `tamanho-fonte: 16px;`, `tamanho-fonte` é o modificador, e `16px` é o valor. Valores podem ser formados por números absolutos, números acompanhados de quantificadores, quantitativos ou ainda uma combinação de todos esses;
- **Quantificadores**: são complementos de valores. No exemplo anterior, `px` é o quantificador, e acompanha o número `16`, a parte numérica do valor;
- **Qualitativos**: são valores adjetivos. Nem todo valor é expresso por um número e uma unidade de medida. Explorando um outro exemplo:
```foles
ligacao {
estilo-contorno: pontilhado;
}
```
`estilo-contorno` é um modificador que pede um qualitativo. `pontihado` é um qualitativo.
## Mapeamentos
| FolEs | CSS |
| ------------------------------------------------------------------------------------------------ | ----------|
| [agrupar-palavra](https://github.com/DesignLiquido/FolEs/wiki/Modificador-agrupar-palavra) | [word-break](https://developer.mozilla.org/pt-BR/docs/Web/CSS/word-break) |
| [agrupar-vazamento](https://github.com/DesignLiquido/FolEs/wiki/Modificador-agrupar-vazamento) | [overflow-wrap](https://developer.mozilla.org/pt-BR/docs/Web/CSS/overflow-wrap) |
| [ajustar-objeto](https://github.com/DesignLiquido/FolEs/wiki/Modificador-ajustar-objeto) | [object-fit](https://developer.mozilla.org/pt-BR/docs/Web/CSS/object-fit) |
| [ajustar-tamanho-fonte](https://github.com/DesignLiquido/FolEs/wiki/Modificador-ajustar-tamanho-fonte) | [font-size-adjust](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size-adjust) |
| [ajuste-cor-forcado](https://github.com/DesignLiquido/FolEs/wiki/Modificador-ajuste-cor-for%C3%A7ado) | [forced-color-adjust](https://developer.mozilla.org/en-US/docs/Web/CSS/forced-color-adjust) |
| [ajuste-cor-forçado](https://github.com/DesignLiquido/FolEs/wiki/Modificador-ajuste-cor-for%C3%A7ado) | [forced-color-adjust](https://developer.mozilla.org/en-US/docs/Web/CSS/forced-color-adjust) |
| [alinhar-conteudo](https://github.com/DesignLiquido/FolEs/wiki/Modificador-alinhar-conte%C3%BAdo) | [align-content](https://developer.mozilla.org/pt-BR/docs/Web/CSS/align-content) |
| [alinhar-conteúdo](https://github.com/DesignLiquido/FolEs/wiki/Modificador-alinhar-conte%C3%BAdo) | [align-content](https://developer.mozilla.org/pt-BR/docs/Web/CSS/align-content) |
| [alinhar-encaixe-rolagem-mouse](https://github.com/DesignLiquido/FolEs/wiki/Modificador-alinhar-encaixe-rolagem-mouse) | [scroll-snap-align](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-align) |
| [alinhar-itens](https://github.com/DesignLiquido/FolEs/wiki/Modificador-alinhar-itens) | [align-items](https://developer.mozilla.org/pt-BR/docs/Web/CSS/align-items) |
| [alinhar-se](https://github.com/DesignLiquido/FolEs/wiki/Modificador-alinhar-se) | [align-self](https://developer.mozilla.org/pt-BR/docs/Web/CSS/align-self) |
| [alinhar-texto](https://github.com/DesignLiquido/FolEs/wiki/Modificador-alinhar-texto) | [text-align](https://developer.mozilla.org/pt-BR/docs/Web/CSS/text-align) |
| [alinhar-vertical](https://github.com/DesignLiquido/FolEs/wiki/Modificador-alinhar-vertical) | [vertical-align](https://developer.mozilla.org/pt-BR/docs/Web/CSS/vertical-align) |
| [alinhar-ultimo-item](https://github.com/DesignLiquido/FolEs/wiki/Modificador-alinhar-%C3%BAltimo-item) | [text-align-last](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align-last) |
| [alinhar-último-item](https://github.com/DesignLiquido/FolEs/wiki/Modificador-alinhar-%C3%BAltimo-item) | [text-align-last](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align-last) |
| [altura](https://github.com/DesignLiquido/FolEs/wiki/Modificador-altura) | [height](https://developer.mozilla.org/pt-BR/docs/Web/CSS/height) |
| [altura-linha](https://github.com/DesignLiquido/FolEs/wiki/Modificador-altura-linha) | [line-height](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height) |
| [altura-maxima](https://github.com/DesignLiquido/FolEs/wiki/Modificador-altura-m%C3%A1xima) | [max-height](https://developer.mozilla.org/en-US/docs/Web/CSS/max-height) |
| [altura-máxima](https://github.com/DesignLiquido/FolEs/wiki/Modificador-altura-m%C3%A1xima) | [max-height](https://developer.mozilla.org/en-US/docs/Web/CSS/max-height) |
| [altura-minima](https://github.com/DesignLiquido/FolEs/wiki/Modificador-altura-m%C3%ADnima) | [min-height](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height) |
| [altura-mínima](https://github.com/DesignLiquido/FolEs/wiki/Modificador-altura-m%C3%ADnima) | [min-height](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height) |
| [animacao](https://github.com/DesignLiquido/FolEs/wiki/Modificador-anima%C3%A7%C3%A3o) | [animation](https://developer.mozilla.org/pt-BR/docs/Web/CSS/animation) |
| [animação](https://github.com/DesignLiquido/FolEs/wiki/Modificador-anima%C3%A7%C3%A3o) | [animation](https://developer.mozilla.org/pt-BR/docs/Web/CSS/animation) |
| [ao-mudar](https://github.com/DesignLiquido/FolEs/wiki/Modificador-ao-mudar) | [will-change](https://developer.mozilla.org/pt-BR/docs/Web/CSS/will-change) |
| [aparencia](https://github.com/DesignLiquido/FolEs/wiki/Modificador-apar%C3%AAncia) | [appearance](https://developer.mozilla.org/en-US/docs/Web/CSS/appearance) |
| [aparência](https://github.com/DesignLiquido/FolEs/wiki/Modificador-apar%C3%AAncia) | [appearance](https://developer.mozilla.org/en-US/docs/Web/CSS/appearance) |
| [area-mascara](https://github.com/DesignLiquido/FolEs/wiki/Modificador-area-mascara) | [mask-clip](https://developer.mozilla.org/en-US/docs/Web/CSS/mask-clip) |
| [área-máscara](https://github.com/DesignLiquido/FolEs/wiki/Modificador-area-mascara) | [mask-clip](https://developer.mozilla.org/en-US/docs/Web/CSS/mask-clip) |
| [atraso-animacao](https://github.com/DesignLiquido/FolEs/wiki/Modificador-atraso-anima%C3%A7%C3%A3o) | [animation-delay](https://developer.mozilla.org/pt-BR/docs/Web/CSS/animation-delay) |
| [atraso-animação](https://github.com/DesignLiquido/FolEs/wiki/Modificador-atraso-anima%C3%A7%C3%A3o) | [animation-delay](https://developer.mozilla.org/pt-BR/docs/Web/CSS/animation-delay) |
| [atraso-transicao](https://github.com/DesignLiquido/FolEs/wiki/Modificador-atraso-transi%C3%A7%C3%A3o) | [transition-delay](https://developer.mozilla.org/pt-BR/docs/Web/CSS/transition-delay) |
| [atraso-transição](https://github.com/DesignLiquido/FolEs/wiki/Modificador-atraso-transi%C3%A7%C3%A3o) | [transition-delay](https://developer.mozilla.org/pt-BR/docs/Web/CSS/transition-delay) |
| [borda](https://github.com/DesignLiquido/FolEs/wiki/Modificador-borda) | [border](https://developer.mozilla.org/en-US/docs/Web/CSS/border) |
| [borda-direita](https://github.com/DesignLiquido/FolEs/wiki/Modificador-borda-direita) | [border-right](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right) |
| [borda-em-bloco](https://github.com/DesignLiquido/FolEs/wiki/Modificador-borda-em-bloco) | [border-block](https://developer.mozilla.org/en-US/docs/Web/CSS/border-block) |
| [borda-em-linha](https://github.com/DesignLiquido/FolEs/wiki/Modificador-borda-em-linha) | [border-inline](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline) |
| [borda-esquerda](https://github.com/DesignLiquido/FolEs/wiki/Modificador-borda-esquerda) | [border-left](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left) |
| [borda-inferior](https://github.com/DesignLiquido/FolEs/wiki/Modificador-borda-inferior) | [border-bottom](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom) |
| [borda-mascara](https://github.com/DesignLiquido/FolEs/wiki/Modificador-borda-m%C3%A1scara) | [mask-border](https://developer.mozilla.org/en-US/docs/Web/CSS/mask-border) |
| [borda-máscara](https://github.com/DesignLiquido/FolEs/wiki/Modificador-borda-m%C3%A1scara) | [mask-border](https://developer.mozilla.org/en-US/docs/Web/CSS/mask-border) |
| [borda-superior](https://github.com/DesignLiquido/FolEs/wiki/Modificador-borda-superior) | [border-top](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top) |
| [calha-barra-rolagem](https://github.com/DesignLiquido/FolEs/wiki/Modificador-calha-barra-rolagem) | [scrollbar-gutter](scrollbar-gutter) |
| [celulas-vazias](https://github.com/DesignLiquido/FolEs/wiki/Modificador-c%C3%A9lulas-vazias) | [empty-cells](https://developer.mozilla.org/en-US/docs/Web/CSS/empty-cells) |
| [células-vazias](https://github.com/DesignLiquido/FolEs/wiki/Modificador-c%C3%A9lulas-vazias) | [empty-cells](https://developer.mozilla.org/en-US/docs/Web/CSS/empty-cells) |
| [citacoes](https://github.com/DesignLiquido/FolEs/wiki/Modificador-cita%C3%A7%C3%B5es) | [quotes](https://developer.mozilla.org/en-US/docs/Web/CSS/quotes) |
| [citações](https://github.com/DesignLiquido/FolEs/wiki/Modificador-cita%C3%A7%C3%B5es) | [quotes](https://developer.mozilla.org/en-US/docs/Web/CSS/quotes) |
| [coluna-em-grade](https://github.com/DesignLiquido/FolEs/wiki/Modificador-coluna-em-grade) | [grid-column](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column) |
| [colunas](https://github.com/DesignLiquido/FolEs/wiki/Modificador-colunas) | [columns](https://developer.mozilla.org/en-US/docs/Web/CSS/columns) |
| [combinar-texto-vertical](https://github.com/DesignLiquido/FolEs/wiki/Modificador-combinar-texto-vertical) | [text-combine-upright](https://developer.mozilla.org/en-US/docs/Web/CSS/text-combine-upright) |
| [comportamento-em-bloco-rolagem-mouse](https://github.com/DesignLiquido/FolEs/wiki/Modificador-comportamento-em-bloco-rolagem-mouse) | [overscroll-behavior-block](https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior-block) |
| [comportamento-em-linha-rolagem-mouse](https://github.com/DesignLiquido/FolEs/wiki/Modificador-comportamento-em-linha-rolagem-mouse) | [overscroll-behavior-inline](https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior-inline) |
| [comportamento-horizontal-rolagem-mouse](https://github.com/DesignLiquido/FolEs/wiki/Modificador-comportamento-horizontal-rolagem-mouse) | [overscroll-behavior-x](https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior-x) |
| [comportamento-rolagem](https://github.com/DesignLiquido/FolEs/wiki/Modificador-comportamento-rolagem) | [scroll-behavior](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior) |
| [comportamento-rolagem-mouse](https://github.com/DesignLiquido/FolEs/wiki/Modificador-comportamento-rolagem-mouse) | [overscroll-behavior](https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior) |
| [comportamento-vertical-rolagem-mouse](https://github.com/DesignLiquido/FolEs/wiki/Modificador-comportamento-vertical-rolagem-mouse) | [overscroll-behavior-y](https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior-y) |
| [composicao-mascara](https://github.com/DesignLiquido/FolEs/wiki/Modificador-composi%C3%A7%C3%A3o-m%C3%A1scara) | [mask-composite](https://developer.mozilla.org/en-US/docs/Web/CSS/mask-composite) |
| [composição-máscara](https://github.com/DesignLiquido/FolEs/wiki/Modificador-composi%C3%A7%C3%A3o-m%C3%A1scara) | [mask-composite](https://developer.mozilla.org/en-US/docs/Web/CSS/mask-composite) |
| [configuracoes-variacao-fonte](https://github.com/DesignLiquido/FolEs/wiki/Modificador-configura%C3%A7%C3%B5es%E2%80%90varia%C3%A7%C3%A3o%E2%80%90fonte) | [font-variation-settings](https://developer.mozilla.org/pt-BR/docs/Web/CSS/font-variation-settings) |
| [configurações-variação-fonte](https://github.com/DesignLiquido/FolEs/wiki/Modificador-configura%C3%A7%C3%B5es%E2%80%90varia%C3%A7%C3%A3o%E2%80%90fonte) | [font-variation-settings](https://developer.mozilla.org/pt-BR/docs/Web/CSS/font-variation-settings) |
| [contar-coluna](https://github.com/DesignLiquido/FolEs/wiki/Modificador-contar-coluna) | [column-count](https://developer.mozilla.org/en-US/docs/Web/CSS/column-count) |
| [contem](https://github.com/DesignLiquido/FolEs/wiki/Modificador-cont%C3%A9m) | [contain](https://developer.mozilla.org/pt-BR/docs/Web/CSS/contain) |
| [contém](https://github.com/DesignLiquido/FolEs/wiki/Modificador-cont%C3%A9m) | [contain](https://developer.mozilla.org/pt-BR/docs/Web/CSS/contain) |
| [conteudo](https://github.com/DesignLiquido/FolEs/wiki/Modificador-conte%C3%BAdo) | [content](https://developer.mozilla.org/pt-BR/docs/Web/CSS/content) |
| [conteúdo](https://github.com/DesignLiquido/FolEs/wiki/Modificador-conte%C3%BAdo) | [content](https://developer.mozilla.org/pt-BR/docs/Web/CSS/content) |
| [contorno](https://github.com/DesignLiquido/FolEs/wiki/Modificador-contorno) | [outline](https://developer.mozilla.org/pt-BR/docs/Web/CSS/outline) |
| [coordenadas](https://github.com/DesignLiquido/FolEs/wiki/Modificador-coordenadas) | [translate](https://developer.mozilla.org/pt-BR/docs/Web/CSS/translate) |
| [cor](https://github.com/DesignLiquido/FolEs/wiki/Modificador-cor) | [color](https://developer.mozilla.org/pt-BR/docs/Web/CSS/color) |
| [cor-barra-rolagem](https://github.com/DesignLiquido/FolEs/wiki/Modificador-cor-barra-rolagem) | [scrollbar-color](https://developer.mozilla.org/pt-BR/docs/Web/CSS/scrollbar-color) |
| [cor-borda](https://github.com/DesignLiquido/FolEs/wiki/Modificador-cor-borda) | [border-color](https://developer.mozilla.org/en-US/docs/Web/CSS/border-color) |
| [cor-borda-direita](https://github.com/DesignLiquido/FolEs/wiki/Modificador-cor-borda-direita) | [border-right-color](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-color) |
| [cor-borda-em-bloco](https://github.com/DesignLiquido/FolEs/wiki/Modificador-cor-borda-em-bloco) | [border-block-color](https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-color) |
| [cor-borda-em-linha](https://github.com/DesignLiquido/FolEs/wiki/Modificador-cor-borda-em-linha) | [border-inline-color](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-color) |
| [cor-borda-esquerda](https://github.com/DesignLiquido/FolEs/wiki/Modificador-cor-borda-esquerda) | [border-left-color](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-color) |
| [cor-borda-inferior](https://github.com/DesignLiquido/FolEs/wiki/Modificador-cor-borda-inferior) | [border-bottom-color](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-color) |
| [cor-borda-superior](https://github.com/DesignLiquido/FolEs/wiki/Modificador-cor-borda-superior) | [border-top-color](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-color) |
| [cor-contorno](https://github.com/DesignLiquido/FolEs/wiki/Modificador-cor-contorno) | [outline-color](https://developer.mozilla.org/en-US/docs/Web/CSS/outline-color) |
| [cor-cursor](https://github.com/DesignLiquido/FolEs/wiki/Modificador-cor-cursor) | [caret-color](https://developer.mozilla.org/en-US/docs/Web/CSS/caret-color) |
| [cor-destaque](https://github.com/DesignLiquido/FolEs/wiki/Modificador-cor-destaque) | [accent-color](https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color) |
| [cor-enfase-texto](https://github.com/DesignLiquido/FolEs/wiki/Modificador-cor-%C3%AAnfase-texto) | [text-emphasis-color](https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis-color) |
| [cor-ênfase-texto](https://github.com/DesignLiquido/FolEs/wiki/Modificador-cor-%C3%AAnfase-texto) | [text-emphasis-color](https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis-color) |
| [cor-fim-borda-em-bloco](https://github.com/DesignLiquido/FolEs/wiki/Modificador-cor-fim-borda-em-bloco) | [border-block-end-color](https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-end-color) |
| [cor-fim-borda-em-linha](https://github.com/DesignLiquido/FolEs/wiki/Modificador-cor-fim-borda-em-linha) | [border-inline-end-color](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end-color) |
| [cor-fundo](https://github.com/DesignLiquido/FolEs/wiki/Modificador-cor-fundo) | [background-color](https://developer.mozilla.org/pt-BR/docs/Web/CSS/background-color) |
| [cor-inicio-borda-em-bloco](https://github.com/DesignLiquido/FolEs/wiki/Modificador-cor-in%C3%ADcio-borda-em-bloco) | [border-block-start-color](https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-start-color) |
| [cor-início-borda-em-bloco](https://github.com/DesignLiquido/FolEs/wiki/Modificador-cor-in%C3%ADcio-borda-em-bloco) | [border-block-start-color](https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-start-color) |
| [cor-inicio-borda-em-linha](https://github.com/DesignLiquido/FolEs/wiki/Modificador-cor-in%C3%ADcio-borda-em-linha) | [border-inline-start-color](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-color) |
| [cor-início-borda-em-linha](https://github.com/DesignLiquido/FolEs/wiki/Modificador-cor-in%C3%ADcio-borda-em-linha) | [border-inline-start-color](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-color) |
| [cursor](https://github.com/DesignLiquido/FolEs/wiki/Modificador-cursor) | [cursor](https://developer.mozilla.org/pt-BR/docs/Web/CSS/cursor) |
| [decoracao-cor-texto](https://github.com/DesignLiquido/FolEs/wiki/Modificador-decora%C3%A7%C3%A3o-cor-texto) | [text-decoration-color](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-color) |
| [decoração-cor-texto](https://github.com/DesignLiquido/FolEs/wiki/Modificador-decora%C3%A7%C3%A3o-cor-texto) | [text-decoration-color](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-color) |
| [decoracao-espessura-texto](https://github.com/DesignLiquido/FolEs/wiki/Modificador-decora%C3%A7%C3%A3o-espessura-texto) | [text-decoration-thickness](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-thickness) |
| [decoração-espessura-texto](https://github.com/DesignLiquido/FolEs/wiki/Modificador-decora%C3%A7%C3%A3o-espessura-texto) | [text-decoration-thickness](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-thickness) |
| [decoracao-estilo-texto](https://github.com/DesignLiquido/FolEs/wiki/Modificador-decora%C3%A7%C3%A3o-estilo-texto) | [text-decoration-style](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-style) |
| [decoração-estilo-texto](https://github.com/DesignLiquido/FolEs/wiki/Modificador-decora%C3%A7%C3%A3o-estilo-texto) | [text-decoration-style](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-style) |
| [decoracao-linha-texto](https://github.com/DesignLiquido/FolEs/wiki/Modificador-decora%C3%A7%C3%A3o-linha-texto) | [text-decoration-line](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-line) |
| [decoração-linha-texto](https://github.com/DesignLiquido/FolEs/wiki/Modificador-decora%C3%A7%C3%A3o-linha-texto) | [text-decoration-line](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-line) |
| [decoracao-texto](https://github.com/DesignLiquido/FolEs/wiki/Modificador-decora%C3%A7%C3%A3o-texto) | [text-decoration](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration) |
| [decoração-texto](https://github.com/DesignLiquido/FolEs/wiki/Modificador-decora%C3%A7%C3%A3o-texto) | [text-decoration](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration) |
| [decoracao-texto-sublinhado](https://github.com/DesignLiquido/FolEs/wiki/Modificador-decora%C3%A7%C3%A3o-texto-sublinhado) | [text-decoration-skip-ink](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-skip-ink) |
| [decoração-texto-sublinhado](https://github.com/DesignLiquido/FolEs/wiki/Modificador-decora%C3%A7%C3%A3o-texto-sublinhado) | [text-decoration-skip-ink](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-skip-ink) |
| [definir-contador](https://github.com/DesignLiquido/FolEs/wiki/Modificador-definir-contador) | [counter-set](https://developer.mozilla.org/en-US/docs/Web/CSS/counter-set) |
| [design-tabela](https://github.com/DesignLiquido/FolEs/wiki/Modificador-design-tabela) | [table-layout](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout) |
| [deslocamento](https://github.com/DesignLiquido/FolEs/wiki/Modificador-deslocamento) | [offset](https://developer.mozilla.org/pt-BR/docs/Web/CSS/offset) |
| [deslocamento-em-ancora](https://github.com/DesignLiquido/FolEs/wiki/Modificador-deslocamento-em-%C3%A2ncora) | [offset-anchor](https://developer.mozilla.org/en-US/docs/Web/CSS/offset-anchor) |
| [deslocamento-em-âncora](https://github.com/DesignLiquido/FolEs/wiki/Modificador-deslocamento-em-%C3%A2ncora) | [offset-anchor](https://developer.mozilla.org/en-US/docs/Web/CSS/offset-anchor) |
| [deslocamento-texto-sublinhado](https://github.com/DesignLiquido/FolEs/wiki/Modificador-deslocamento-texto-sublinhado) | [text-underline-offset](https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-offset) |
| [deslocar-contorno](https://github.com/DesignLiquido/FolEs/wiki/Modificador-deslocar-contorno) | [outline-offset](https://developer.mozilla.org/en-US/docs/Web/CSS/outline-offset) |
| [deslocar-pontuacao](https://github.com/DesignLiquido/FolEs/wiki/Modificador-deslocar-pontua%C3%A7%C3%A3o) | [hanging-punctuation](https://developer.mozilla.org/en-US/docs/Web/CSS/hanging-punctuation) |
| [deslocar-pontuação](https://github.com/DesignLiquido/FolEs/wiki/Modificador-deslocar-pontua%C3%A7%C3%A3o) | [hanging-punctuation](https://developer.mozilla.org/en-US/docs/Web/CSS/hanging-punctuation) |
| [direcao](https://github.com/DesignLiquido/FolEs/wiki/Modificador-dire%C3%A7%C3%A3o) | [direction](https://developer.mozilla.org/en-US/docs/Web/CSS/direction) |
| [direção](https://github.com/DesignLiquido/FolEs/wiki/Modificador-dire%C3%A7%C3%A3o) | [direction](https://developer.mozilla.org/en-US/docs/Web/CSS/direction) |
| [direcao-animacao](https://github.com/DesignLiquido/FolEs/wiki/Modificador-dire%C3%A7%C3%A3o-anima%C3%A7%C3%A3o) | [animation-direction](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction) |
| [direção-animação](https://github.com/DesignLiquido/FolEs/wiki/Modificador-dire%C3%A7%C3%A3o-anima%C3%A7%C3%A3o) | [animation-direction](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction) |
| [distancia-deslocamento](https://github.com/DesignLiquido/FolEs/wiki/Modificador-dist%C3%A2ncia-deslocamento) | [offset-distance](https://developer.mozilla.org/en-US/docs/Web/CSS/offset-distance) |
| [distância-deslocamento](https://github.com/DesignLiquido/FolEs/wiki/Modificador-dist%C3%A2ncia-deslocamento) | [offset-distance](https://developer.mozilla.org/en-US/docs/Web/CSS/offset-distance) |
| [duracao-animacao](https://github.com/DesignLiquido/FolEs/wiki/Modificador-dura%C3%A7%C3%A3o-anima%C3%A7%C3%A3o) | [animation-duration](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration) |
| [duração-animação](https://github.com/DesignLiquido/FolEs/wiki/Modificador-dura%C3%A7%C3%A3o-anima%C3%A7%C3%A3o) | [animation-duration](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration) |
| [duracao-transicao](https://github.com/DesignLiquido/FolEs/wiki/Modificador-dura%C3%A7%C3%A3o-transi%C3%A7%C3%A3o) | [transition-duration](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-duration) |
| [duração-transição](https://github.com/DesignLiquido/FolEs/wiki/Modificador-dura%C3%A7%C3%A3o-transi%C3%A7%C3%A3o) | [transition-duration](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-duration) |
| [enfase-texto](https://github.com/DesignLiquido/FolEs/wiki/Modificador-enfase-texto) | [text-emphasis](https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis) |
| [ênfase-texto](https://github.com/DesignLiquido/FolEs/wiki/Modificador-enfase-texto) | [text-emphasis](https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis) |
| [escala](https://github.com/DesignLiquido/FolEs/wiki/Modificador-escala) | [scale](https://developer.mozilla.org/en-US/docs/Web/CSS/scale) |
| [espacamento](https://github.com/DesignLiquido/FolEs/wiki/Modificador-espa%C3%A7amento) | [gap](https://developer.mozilla.org/pt-BR/docs/Web/CSS/gap) |
| [espaçamento](https://github.com/DesignLiquido/FolEs/wiki/Modificador-espa%C3%A7amento) | [gap](https://developer.mozilla.org/pt-BR/docs/Web/CSS/gap) |
| [espacamento-coluna](https://github.com/DesignLiquido/FolEs/wiki/Modificador-espa%C3%A7amento-coluna) | [column-gap](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap) |
| [espaçamento-coluna](https://github.com/DesignLiquido/FolEs/wiki/Modificador-espa%C3%A7amento-coluna) | [column-gap](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap) |
| [espacamento-coluna-em-grade](https://github.com/DesignLiquido/FolEs/wiki/Modificador-espa%C3%A7amento-coluna-em-grade) | [grid-column-gap](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap) |
| [espaçamento-coluna-em-grade](https://github.com/DesignLiquido/FolEs/wiki/Modificador-espa%C3%A7amento-coluna-em-grade) | [grid-column-gap](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap) |
| [espacamento-em-grade](https://github.com/DesignLiquido/FolEs/wiki/Modificador-espa%C3%A7amento-em-grade) | [grid-gap](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) |
| [espaçamento-em-grade](https://github.com/DesignLiquido/FolEs/wiki/Modificador-espa%C3%A7amento-em-grade) | [grid-gap](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) |
| [espacamento-fonte](https://github.com/DesignLiquido/FolEs/wiki/Modificador-espa%C3%A7amento-fonte) | [font-kerning](https://developer.mozilla.org/pt-BR/docs/Web/CSS/font-kerning) |
| [espaçamento-fonte](https://github.com/DesignLiquido/FolEs/wiki/Modificador-espa%C3%A7amento-fonte) | [font-kerning](https://developer.mozilla.org/pt-BR/docs/Web/CSS/font-kerning) |
| [espacamento-letras](https://github.com/DesignLiquido/FolEs/wiki/Modificador-espa%C3%A7amento-letras) | [letter-spacing](https://developer.mozilla.org/pt-BR/docs/Web/CSS/letter-spacing) |
| [espaçamento-letras](https://github.com/DesignLiquido/FolEs/wiki/Modificador-espa%C3%A7amento-letras) | [letter-spacing](https://developer.mozilla.org/pt-BR/docs/Web/CSS/letter-spacing) |
| [espacamento-linhas](https://github.com/DesignLiquido/FolEs/wiki/Modificador-espa%C3%A7amento-linhas) | [row-gap](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap) |
| [espaçamento-linhas](https://github.com/DesignLiquido/FolEs/wiki/Modificador-espa%C3%A7amento-linhas) | [row-gap](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap) |
| [espacamento-linha-em-grade](https://github.com/DesignLiquido/FolEs/wiki/Modificador-espa%C3%A7amento-linha-em-grade) | [grid-row-gap](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap) |
| [espaçamento-linha-em-grade](https://github.com/DesignLiquido/FolEs/wiki/Modificador-espa%C3%A7amento-linha-em-grade) | [grid-row-gap](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap) |
| [espacamento-palavras](https://github.com/DesignLiquido/FolEs/wiki/Modificador-espa%C3%A7amento-palavras) | [word-spacing](https://developer.mozilla.org/en-US/docs/Web/CSS/word-spacing) |
| [espaçamento-palavras](https://github.com/DesignLiquido/FolEs/wiki/Modificador-espa%C3%A7amento-palavras) | [word-spacing](https://developer.mozilla.org/en-US/docs/Web/CSS/word-spacing) |
| [espaco-borda](https://github.com/DesignLiquido/FolEs/wiki/Modificador-espa%C3%A7o-borda) | [border-spacing](https://developer.mozilla.org/en-US/docs/Web/CSS/border-spacing) |
| [espaço-borda](https://github.com/DesignLiquido/FolEs/wiki/Modificador-espa%C3%A7o-borda) | [border-spacing](https://developer.mozilla.org/en-US/docs/Web/CSS/border-spacing) |
| [espaco-em-branco](https://github.com/DesignLiquido/FolEs/wiki/Modificador-espa%C3%A7o-em-branco) | [white-space](https://developer.mozilla.org/pt-BR/docs/Web/CSS/white-space) |
| [espaço-em-branco](https://github.com/DesignLiquido/FolEs/wiki/Modificador-espa%C3%A7o-em-branco) | [white-space](https://developer.mozilla.org/pt-BR/docs/Web/CSS/white-space) |
| [espessura-fonte](https://github.com/DesignLiquido/FolEs/wiki/Modificador-espessura-fonte) | [font-weight](https://developer.mozilla.org/pt-BR/docs/Web/CSS/font-weight) |
| [esquema-cor](https://github.com/DesignLiquido/FolEs/wiki/Modificador-esquema-cor) | [color-scheme](https://developer.mozilla.org/pt-BR/docs/Web/CSS/color-scheme) |
| [estender-borda-imagem](https://github.com/DesignLiquido/FolEs/wiki/Modificador-estender-borda-imagem) | [border-image-outset](https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-outset) |
| [estender-coluna](https://github.com/DesignLiquido/FolEs/wiki/Modificador-estender-coluna) | [column-span](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span) |
| [esticar-fonte](https://github.com/DesignLiquido/FolEs/wiki/Modificador-esticar-fonte) | [font-stretch](https://developer.mozilla.org/en-US/docs/Web/CSS/font-stretch) |
| [estilo-borda](https://github.com/DesignLiquido/FolEs/wiki/Modificador-estilo-borda) | [border-style](https://developer.mozilla.org/en-US/docs/Web/CSS/border-style) |
| [estilo-borda-direita](https://github.com/DesignLiquido/FolEs/wiki/Modificador-estilo-borda-direita) | [border-right-style](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-style) |
| [estilo-borda-em-bloco](https://github.com/DesignLiquido/FolEs/wiki/Modificador-estilo-borda-em-bloco) | [border-block-style](https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-style) |
| [estilo-borda-em-linha](https://github.com/DesignLiquido/FolEs/wiki/Modificador-estilo-borda-em-linha) | [border-inline-style](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-style) |
| [estilo-borda-esquerda](https://github.com/DesignLiquido/FolEs/wiki/Modificador-estilo-borda-esquerda) | [border-left-style](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-style) |
| [estilo-borda-inferior](https://github.com/DesignLiquido/FolEs/wiki/Modificador-estilo-borda-inferior) | [border-bottom-style](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-style) |
| [estilo-borda-superior](https://github.com/DesignLiquido/FolEs/wiki/Modificador-estilo-borda-superior) | [border-top-style](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-style) |
| [estilo-contorno](https://github.com/DesignLiquido/FolEs/wiki/Modificador-estilo-contorno) | [outline-style](https://developer.mozilla.org/en-US/docs/Web/CSS/outline-style) |
| [estilo-enfase-texto](https://github.com/DesignLiquido/FolEs/wiki/Modificador-estilo-%C3%AAnfase-texto) | [text-emphasis-style](https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis-style) |
| [estilo-ênfase-texto](https://github.com/DesignLiquido/FolEs/wiki/Modificador-estilo-%C3%AAnfase-texto) | [text-emphasis-style](https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis-style) |
| [estilo-fim-borda-em-bloco](https://github.com/DesignLiquido/FolEs/wiki/Modificador-estilo-fim-borda-em-bloco) | [border-block-end-style](https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-end-style) |
| [estilo-fim-borda-em-linha](https://github.com/DesignLiquido/FolEs/wiki/Modificador-estilo-fim-borda-em-linha) | [border-inline-end-style](https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-end-style) |
| [estilo-fonte](https://github.com/DesignLiquido/FolEs/wiki/Modificador-estilo-fonte) | [font-style](https://developer.mozilla.org/en-US/docs/Web/CSS/font-style) |
| [estilo-inicio-borda-em-bloco](https://github.com/DesignLiquido/FolEs/wiki/Modificador-estilo-in%C3%ADcio-borda-em-bloco) | [border-block-start-style](https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-start-style) |
| [estilo-início-borda-em-bloco](https://github.com/DesignLiquido/FolEs/wiki/Modificador-estilo-in%C3%ADcio-borda-em-bloco) | [border-block-start-style](https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-start-style) |
| [estilo-inicio-borda-em-linha](https://github.com/DesignLiquido/FolEs/wiki/Modificador-estilo-in%C3%ADcio-borda-em-linha) | [border-inline-start-style](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-style) |
| [estilo-início-borda-em-linha](https://github.com/DesignLiquido/FolEs/wiki/Modificador-estilo-in%C3%ADcio-borda-em-linha) | [border-inline-start-style](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-style) |
| [estilo-lista](https://github.com/DesignLiquido/FolEs/wiki/Modificador-estilo-lista) | [list-style](https://developer.mozilla.org/en-US/docs/Web/CSS/list-style) |
| [estilo-lista-imagem](https://github.com/DesignLiquido/FolEs/wiki/Modificador-estilo-lista-imagem) | [list-style-image](https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-image) |
| [estilo-lista-posicao](https://github.com/DesignLiquido/FolEs/wiki/Modificador-estilo-lista-posi%C3%A7%C3%A3o) | [list-style-position](https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-position) |
| [estilo-lista-posição](https://github.com/DesignLiquido/FolEs/wiki/Modificador-estilo-lista-posi%C3%A7%C3%A3o) | [list-style-position](https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-position) |
| [estilo-lista-tipo](https://github.com/DesignLiquido/FolEs/wiki/Modificador-estilo-lista-tipo) | [list-style-type](https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type) |
| [eventos-ponteiro](https://github.com/DesignLiquido/FolEs/wiki/Modificador-eventos-ponteiro) | [pointer-events](https://developer.mozilla.org/pt-BR/docs/Web/CSS/pointer-events) |
| [exibicao](https://github.com/DesignLiquido/FolEs/wiki/Modificador-exibi%C3%A7%C3%A3o) | [display](https://developer.mozilla.org/pt-BR/docs/Web/CSS/display) |
| [exibição](https://github.com/DesignLiquido/FolEs/wiki/Modificador-exibi%C3%A7%C3%A3o) | [display](https://developer.mozilla.org/pt-BR/docs/Web/CSS/display) |
| [fatiar-borda-mascara](https://github.com/DesignLiquido/FolEs/wiki/Modificador-fatiar-borda-m%C3%A1scara) | [mask-border-slice](https://developer.mozilla.org/en-US/docs/Web/CSS/mask-border-slice) |
| [fatiar-borda-máscara](https://github.com/DesignLiquido/FolEs/wiki/Modificador-fatiar-borda-m%C3%A1scara) | [mask-border-slice](https://developer.mozilla.org/en-US/docs/Web/CSS/mask-border-slice) |
| [fatiar-imagem-borda](https://github.com/DesignLiquido/FolEs/wiki/Modificador-fatiar-imagem-borda) | [border-image-slice](https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-slice) |
| [filtro](https://github.com/DesignLiquido/FolEs/wiki/Modificador-filtro) | [filter](https://developer.mozilla.org/en-US/docs/Web/CSS/filter) |
| [filtro-fundo](https://github.com/DesignLiquido/FolEs/wiki/Modificador-filtro%E2%80%90fundo) | [backdrop-filter](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter) |
| [fim-borda-em-bloco](https://github.com/DesignLiquido/FolEs/wiki/Modificador-fim-borda-em-bloco) | [border-block-end](https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-end) |
| [fim-borda-em-linha](https://github.com/DesignLiquido/FolEs/wiki/Modificador-fim-borda-em-linha) | [border-inline-end](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end) |
| [fim-coluna-em-grade](https://github.com/DesignLiquido/FolEs/wiki/Modificador-fim-coluna-em-grade) | [grid-column-end](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end) |
| [fim-linha-em-grade](https://github.com/DesignLiquido/FolEs/wiki/Modificador-fim-linha-em-grade) | [grid-row-end](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end) |
| [fixar-fundo](https://github.com/DesignLiquido/FolEs/wiki/Modificador-fixar-fundo) | [background-attachment](https://developer.mozilla.org/pt-BR/docs/Web/CSS/background-attachment) |
| [flex](https://github.com/DesignLiquido/FolEs/wiki/Modificador-flex) | [flex](https://developer.mozilla.org/pt-BR/docs/Web/CSS/flex) |
| [flex-agrupar](https://github.com/DesignLiquido/FolEs/wiki/Modificador-flex-agrupar) | [flex-wrap](https://developer.mozilla.org/pt-BR/docs/Web/CSS/flex-wrap) |
| [flex-comprimento](https://github.com/DesignLiquido/FolEs/wiki/Modificador-flex-comprimento) | [flex-basis](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis) |
| [flex-crescimento](https://github.com/DesignLiquido/FolEs/wiki/Modificador-flex-crescimento) | [flex-grow](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow) |
| [flex-direcao](https://github.com/DesignLiquido/FolEs/wiki/Modificador-flex-dire%C3%A7%C3%A3o) | [flex-direction](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction) |
| [flex-direção](https://github.com/DesignLiquido/FolEs/wiki/Modificador-flex-dire%C3%A7%C3%A3o) | [flex-direction](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction) |
| [flex-fluxo](https://github.com/DesignLiquido/FolEs/wiki/Modificador-flex-fluxo) | [flex-flow](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-flow) |
| [flex-reduzir](https://github.com/DesignLiquido/FolEs/wiki/Modificador-flex-reduzir) | [flex-shrink](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink) |
| [flutuar](https://github.com/DesignLiquido/FolEs/wiki/Modificador-flutuar) | [float](https://developer.mozilla.org/pt-BR/docs/Web/CSS/float) |
| [fluxo](https://github.com/DesignLiquido/FolEs/wiki/Modificador-fluxo) | [clear](https://developer.mozilla.org/pt-BR/docs/Web/CSS/clear) |
| [fluxo-em-grade](https://github.com/DesignLiquido/FolEs/wiki/Modificador-fluxo-em-grade) | [grid-auto-flow](https://developer.mozilla.org/pt-BR/docs/Web/CSS/grid-auto-flow) |
| [fonte](https://github.com/DesignLiquido/FolEs/wiki/Modificador-fonte) | [font](https://developer.mozilla.org/en-US/docs/Web/CSS/font) |
| [fonte-texto](https://github.com/DesignLiquido/FolEs/wiki/Modificador-fonte-texto) | [font-family](https://developer.mozilla.org/pt-BR/docs/Web/CSS/font-family) |
| [forma-externa](https://github.com/DesignLiquido/FolEs/wiki/Modificador-forma-externa) | [shape-outside](https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outside) |
| [forma-margem](https://github.com/DesignLiquido/FolEs/wiki/Modificador-forma-margem) | [shape-margin](https://developer.mozilla.org/en-US/docs/Web/CSS/shape-margin) |
| [fundo](https://github.com/DesignLiquido/FolEs/wiki/Modificador-fundo) | [background](https://developer.mozilla.org/pt-BR/docs/Web/CSS/background) |
| [girar](https://github.com/DesignLiquido/FolEs/wiki/Modificador-girar) | [