7 novas técnicas incríveis de CSS para 2019

Publicados: 2019-05-01

Este é o momento certo para escolher o desenvolvimento web como uma opção de carreira. Assim como os web designers, os desenvolvedores web também são fascinados por maneiras de experimentar novas técnicas de CSS e ultrapassar os limites do que o CSS pode fazer.

Aqui, vamos dar uma olhada em algumas das novas técnicas de CSS e especificações inteiras que estão chegando aos designs criativos. Você pode controlar quase qualquer aspecto de um design por um CSS bem descrito. Além disso, pode melhorar a experiência geral do usuário, com um código mais limpo e consistente.

1. Carta Inicial

Letra inicial é uma propriedade CSS, propriedade que seleciona a primeira letra do elemento e especifica o número de linhas ocupadas pela letra. Na maioria das vezes é usado em mídia impressa e sites de informação, sites de notícias, onde a primeira letra do parágrafo está com muito mais alto que o restante do conteúdo.

A propriedade de letra inicial ajusta automaticamente o número de linhas necessárias para criar a capitulação estilizada e o tamanho da fonte. Carta inicial aprova os seguintes valores:

  • <number> refere-se a quantas linhas a letra ocupa em que valores negativos não são aceitos;
  • normal é útil se você quiser redefinir o valor se ele puder ser herdado da cascata e nenhum efeito de escala for aplicado à primeira letra;
  • <integer> determina o número de linhas em que a letra deve afundar quando seu tamanho for predefinido. Os valores devem ser maiores que zero e, se o valor não for especificado, o valor de tamanho será duplicado, reduzido para o número inteiro positivo mais próximo;

O ::first-letter pseudo-element pode ser usado para selecionar caracteres que serão formatados como letras iniciais. O ::first-letter pseudo-element não seleciona a primeira letra do elemento que possui display: inline, mas funciona apenas em elementos que possuem um valor de display de block, table-cell, table-caption ou list-item .

<!DOCTYPE html>
<html>
<head>
<style>
p {
 font-family: Serif;
 font-size: 20px;
 margin-bottom: -15px;
}
h1 {
 font-family: Sans-serif;
 font-size: 3.1em;
 color: black;
}
body {
 padding: 10px;
}
div {
 width: 550px;
 line-height: 25px;
}
p:first-of-type:first-letter {
 background-color: black;
 color: white;
 float: left;
 font-size: 50px;
 margin-right: 10px;
 margin-top: 7px;
 padding: 18px;
 box-shadow: 0 0 10px -2px black;
}
</style>
</head>
<body>
<h1>About initial letter</h1>
<div>
<p>Only one who devotes himself to a cause with his whole strength and soul can be a true master. For this reason mastery demands all of a person"</p>
<p>"Concern for man and his fate must always form the chief interest of all technical endeavors. Never forget this in the midst of your diagrams and equation"</p>
</div>
</body>
</html>

Initial letter

2. Fontes Variáveis

As fontes variáveis ​​representam um novo conjunto de recursos definidos como parte da especificação OpenType e permitem que os arquivos de fonte contenham várias variações de uma fonte em um único arquivo, chamado de fonte variável. Na prática, permite acessar as variáveis ​​contidas no arquivo de fonte com apenas uma referência @ font-face. Além disso, as fontes variáveis ​​permitem funções como transição de estilos de fonte, estilos de fonte personalizados e animação. O benefício de usar a fonte variável é que você tem acesso a toda a gama de estilos, pesos e larguras disponíveis.

As fontes variáveis ​​definem suas variações através de eixos de variação e existem 5 eixos padrão:

  • ital: o eixo itálico funciona de forma diferente porque está habilitado ou desabilitado, não há meio-termo. O valor pode ser definido usando a propriedade CSS font-style. Além disso, ao introduzir font-synthesis: none, evitará que os navegadores apliquem acidentalmente o eixo de variação e um itálico sintetizado.
  • wght: controla o peso da fonte e o valor pode ser definido usando a propriedade CSS font-weight.
  • wdth: controla a largura da fonte e o valor pode ser definido usando a propriedade CSS font-width. domínio codificado, o navegador cria a fonte no valor permitido mais próximo.
  • opsz: dimensionamento óptico refere-se à prática de alterar o tamanho óptico da fonte e o valor pode ser definido usando o CSS font-optical-sizing.Os valores de tamanho óptico são aplicados automaticamente dependendo do tamanho da fonte, mas podem ser manipulados usando a variação de fonte -settings.Ao usar font-optical-sizing, os valores admitidos são auto ou none, e ao usar font-variation-settings, um valor numérico é fornecido.
  • slnt: controla a inclinação da fonte e o valor pode ser definido usando a propriedade CSS font-style. É variável por ser expressa como um intervalo numérico, e isso permite que a fonte varie em qualquer lugar ao longo desse eixo.

Usando fontes variáveis ​​com @font-face – ao usar fontes variáveis ​​na web, isso envolve a definição de regras @ font-face que indicam arquivos de fontes variáveis. Aqui estão 2 links que permitem encontrar fontes variáveis: axis-praxis.org e v -fonts. com.

<!DOCTYPE html>
<html>
<head>
<title>About variable fonts</title>
</head>
<style>
@font-face {
  font-family: 'Avenir Next Variable';
src: url('https://cdn.rawgit.com/Monotype/Monotype_prototype_variable_fonts/f8067a0e/AvenirNext/AvenirNext_Variable.ttf') format('truetype');
}
html {
  font-family: 'Avenir Next Variable', sans-serif;
}
p {
  font-variation-settings: 'wght' 630, 'wdth' 88;
}
</style>
<body>
<h1>About variable fonts</h1>
<h2>About variable fonts</h2>
<p>
	"Any intelligent fool can make things bigger and more complex… It takes a touch of genius – and a lot of courage to move in the opposite direction."
</p>
</body>
</html>

Variablefonts

3. Propriedades e valores lógicos

Propriedades e valores lógicos é um módulo CSS que introduz propriedades e valores lógicos que permitem controlar a aparência por meio de direções lógicas e mapeamentos de dimensão. Propriedades e valores lógicos usam termos como bloco e inline para descrever a direção na qual eles fluem. A especificação de Propriedades e Valores Lógicos caracteriza mapeamentos para valores físicos em suas relações lógicas.

A dimensão em linha – é a dimensão ao longo da qual uma linha de texto é escrita no tipo de escrita usado. Então, em um documento aleatório em inglês, o texto é horizontal, da esquerda para a direita, em outro documento árabe, a escrita também é horizontal, mas da direita para a esquerda e se levarmos em conta um documento japonês, a dimensão inline agora é vertical porque o modo de escrita executado verticalmente.

A dimensão do bloco – corresponde à ordem em que os blocos são exibidos na página. Em inglês e árabe eles são executados verticalmente, enquanto em qualquer modo de escrita vertical eles são executados horizontalmente.

<!DOCTYPE html>
<html>
<head>
<style>
html {
  font: 20px Sans-serif;
}
body {
  padding: 25px;
  background-color: lightyellow;
  color: black;
}
.box {
  border: 4px solid black;
  border-radius: 20px;
  padding: 20px;
  margin: 12px;
}
.one {
  block-size: 100px;
  inline-size: 200px;
}
.two {
  height: 100px;
  width: 200px;
}
</style>
</head>
<body>
</div>
<div id="container">
<div class="box one">
  My block-size is 100 pixels, my inline-size 200px.
</div>
<div class="box two">
  My height is 100 pixels, my width 200px.
</div>
</div>
</body>
</html>

Logical properties and values

4. Encaixe de rolagem

A propriedade CSS scroll-snap-type determina a rigidez com que os pontos de fixação são aplicados ao container de rolagem. .Anteriormente, podia ser usado com JavaScript, mas graças ao novo módulo CSS Scroll Snap, o efeito pode ser controlado em CSS.Scroll snapping é feito definindo o elemento pai/contêiner e filhos no contêiner que irão se encaixar de acordo com o regras definidas na propriedade container.Scroll-snap-type é a propriedade mais importante que se aplica ao elemento container.Define o scroll snap axis x, y, block, inline ou ambos e o scroll snap rigidness none, proximidade ou obrigatório.

<!DOCTYPE html>
<html>
<head>
<style>
html, body, .C {
  height: 50%;
}
.C {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-flow: column nowrap;
  font-family: arial;
}
.container {
  display: flex;
  flex: none;
  overflow: auto
}
.container.x {
  width: 70%;
  height: 150px;
  flex-flow: row nowrap;
}
.container.y {
  width: 256px;
  height: 256px;
  flex-flow: column nowrap;
}
.y.mandatory-scroll-snapping {
  scroll-snap-type: y mandatory;
}
.x.proximity-scroll-snapping {
  scroll-snap-type: x proximity;
}
.container > div {
  text-align: center;
  scroll-snap-align: center;
  flex: none;
}
.x.container> div {
  line-height: 128px;
  font-size: 64px;
  width: 100%;
  height: 128px;
}
.y.container> div {
  line-height: 256px;
  font-size: 128px;
  width: 256px;
  height: 256px;
}
.y.container>div:{
  line-height: 1.4;
  font-size: 80px;
}
.container >div:{
  background-color: white;
}
.container >div:{
  background-color: white;
}
</style>
</head>
<body>
<div class=".C">
<div class="container x mandatory-scroll-snapping" dir="ltr">
<div>Scroll Snapping</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<div class="container y mandatory-scroll-snapping" dir="ltr">
<div>About Scropp Snapping</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</div>
</body>
</html>

Scroll snapping

5. Grade Nível 2 e Subgrade

A especificação de nível 2 contém tudo no nível 1 e alguns novos recursos. O nível 2 da especificação de grade cria o recurso de subgrade do CSS Grid. Nas linhas a seguir, veremos o recurso de subgrade como está detalhado no Rascunho do Editor do Nível 2 de Grade. Opção de layout de grade, um elemento de grade pode ser transformado em um contêiner de grade definindo display: grid on it.In the example below, I have an item that includes 3 column tracks of the grid, is a container grid with 3 column tracks, and estes não se alinham com as faixas do pai.

<!DOCTYPE html>
<html>
<head>
<title>CSS Grid Level 2 - subgrid</title>
</head>
<style>
body {
  margin: 20px;
}
.one {
  background-color: black;
  color: white;
  border-radius: 20px;
  padding: 20px;
  font-size: 120%;
}
.A .one {
  background-color: lightgrey;
}
.GRID {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 3fr 1.5fr 2fr 1fr 1fr 2fr;
  background-color: white;
  color: black;
  margin: 1.5em 0;
}
.A {
  padding: 0;
  grid-gap: 15px;
  grid-column: auto / span 4;
  display: grid;
  grid-template-columns: 3fr 1.5fr 1.5fr;
}
</style>
<body>
<div class="GRID">
<div class="one 1">1</div>
<div class="one 2">2</div>
<div class="one 3">3</div>
<div class="one 4">4</div>
<div class="one 5">5</div>
<div class="one 6">6</div>
<div class="one 7">7</div>
<div class="one 8">8</div>
<div class="one A">
<div class="one 9">9</div>
<div class="one 10">10</div>
<div class="one 11">11</div>
<div class="one 12">12</div>
<div class="one 13">13</div>
<div class="one 14">14</div>
</div>
<div class="one 15">15</div>
<div class="one 16">16</div>
<div class="one 17">17</div>
<div class="one 18">18</div>
<div class="one 19">19</div>
<div class="one 20">20</div>
</div>
</body>
</html>

Grid level 2 and subgrid

Sendo um projeto open source, você pode ver no GitHub como o trabalho está evoluindo no grupo CSS. O desenvolvimento de especificações e implementação do navegador é um processo circular. Assim, você pode observar como esse recurso de subgrade está progredindo e as implementações de navegadores emergentes.

6. Use CSS para testar o suporte do navegador

CSS desenvolveu uma maneira de testar o suporte do navegador para novos recursos. Basicamente, faça uma pergunta para descobrir se o navegador aceita um recurso CSS específico. Desta forma faz com que os novos recursos sejam utilizados de forma segura e concisa. Ao utilizar qualquer novo recurso CSS, é necessário verificar se o navegador suporta esse recurso. Nesta linha, é recomendável consultar os dados em caniuse.com, onde você pode importar os dados para sua localização.

Use CSS to test browser support

O CSS @supports permite especificar declarações que dependem do suporte do navegador para recursos CSS, sendo isso chamado de consulta de recurso. Essa regra pode ser escrita na parte superior do código ou pode ser aninhada dentro de qualquer outro grupo condicional at-rule.

@supports (display: grid) {
  div {
    display: grid;
  }
}
7. Melhorias de sintaxe para consultas de mídia - Nível 4

A especificação Media Queries Level 4 contém algumas melhorias na sintaxe para fazer media queries usando recursos que possuem um tipo de intervalo, como altura e largura.

Para exemplificar, usamos max-functionality para largura

@media (max-width: 20em)

Podemos tentar uma largura entre dois valores aleatórios usando min- e max-

@media (min-width: 20em) and (max-width: 35em)

Para um melhor entendimento, no exemplo acima queremos dizer que a largura é maior ou igual a 20em e menor ou igual a 35em

Conclusão

Os desenvolvedores de sites devem estar cientes de quaisquer novas técnicas de CSS e aplicá-las em projetos futuros. Eles aumentarão seus padrões de trabalho e os clientes ficarão satisfeitos com a aparência aprimorada do site.