Formatação condicional CSS
Exemplo 01: Formatação condicional com base na regra condicional de suporte do CSS
Neste exemplo, usaremos a propriedade de regra condicional de suporte do CSS para determinar como a mudança de estilo será aplicada quando o navegador ou suas configurações forem modificadas. Vamos optar pela abordagem CSS de etiqueta de estilo interno neste exemplo.
Neste script, começaremos com o cabeçalho do arquivo onde as propriedades de estilo para a formatação condicional de suporte serão incluídas. Na tag de estilo, chamaremos a regra da condição de "suporte". Em seguida, aplique a formatação relacionada à exibição na etiqueta de título H1, na qual a grade mudará quando o tamanho da exibição mudar. Em seguida, abriremos a etiqueta corporal e inseriremos uma seção para a etiqueta de cabeçalho H1. A tag de seção chamará as propriedades de estilo que adicionamos na etiqueta de estilo do cabeçalho do arquivo. Vamos fechar a seção e a tag corporal para encerrar o arquivo.
Nesta saída, podemos ver que o navegador está aberto em tamanho maximizado e a seção está espalhada. Mas quando minimizamos o tamanho da tela, a seção se adapta à mudança de tamanho e encolhe de acordo com o tamanho da nova página, como visto abaixo:
Exemplo 02: Formatação condicional com base na regra condicional da mídia do CSS
Utilizaremos a técnica de tag de estilo CSS neste exemplo. Neste exemplo, utilizaremos a propriedade de regra condicional da mídia do CSS para controlar como o estilo muda quando o tamanho do navegador mudar.
Neste script, começaremos com o cabeçalho do arquivo onde as propriedades de estilo para a formatação condicional da mídia serão incluídas. Invaremos a regra da condição de “mídia” na etiqueta de estilo e aplicaremos a formatação relacionada à exibição na tag h1 de título, para que a grade mude quando o tamanho da exibição muda para 700px ou menor. Em seguida, abriremos a etiqueta corporal onde adicionaremos uma seção para a etiqueta de cabeçalho H1. A tag de seção chamará as propriedades de estilo que adicionamos na etiqueta de estilo do cabeçalho do arquivo. Vamos fechar a seção e a tag corporal para encerrar o arquivo.
Nos dois trechos, podemos ver que, quando o tamanho muda, a formatação é diferente e, quando aumenta, se adapta às propriedades de estilo definidas no cabeçalho do arquivo.
Exemplo 03: Formatação condicional com base na regra condicional do documento do CSS
Usaremos a capacidade de regra condicional do documento do CSS gerenciar como o estilo muda neste exemplo quando o tamanho do navegador mudar.
Começaremos com o cabeçalho do arquivo, que contém a etiqueta de estilo, na qual usaremos a regra de condição de "documento". Em seguida, adicionaremos a formatação relacionada à exibição à tag h1 de título, para que a grade mude dependendo da visita de URL. Também mudaremos a cor do fundo, a cor da fonte e o preenchimento. A tag de seção invocará os atributos estilísticos adicionados na tag de estilo do cabeçalho do arquivo. Para terminar o arquivo, fecharemos a seção e as tags do corpo.
A saída acima é a visão de como a página ficará na visita do URL do documento fornecido.
Exemplo 04: Formatação condicional em um elemento de tabela transformando a cor da fonte
Neste exemplo, formataremos uma tabela e seus elementos usando formatação condicional. Este é um tipo de formatação condicional que não segue nenhuma das três regras das condições CSS.
Neste script, adicionaremos as propriedades de estilo CSS em uma tag de tipo de texto de estilo. Nesta tag, estaremos focados na fonte dos dados da tabela. Primeiro, adicionaremos duas propriedades que terão certas condições. A primeira propriedade será para a entrada de dados normal, que será mostrada como entrada pela função de seletor "Att". Então, a segunda propriedade será para a quantidade que terá o sinal "-" com eles, no qual a função posterior transforma a cor da fonte em uma cor vermelha que destacará o valor ou perda negativa em nosso caso.
Depois disso, fecharemos o estilo e as tags de cabeça e abriremos o corpo do arquivo HTML. Incluiremos uma tabela com uma borda no corpo do arquivo. Usando a tag TR, adicionaremos duas linhas a esta tabela. A primeira linha terá duas colunas, uma para o cabeçalho e outra para os dados da tabela. Nos dados da tabela, incluiremos a quantidade monetária que corresponde à propriedade indicada na tag de estilo. A segunda linha também terá uma estrutura semelhante, mas os dados da tabela terão um valor negativo. Depois disso, terminaremos o arquivo fechando todas as tags restantes.
Conforme mostrado na saída acima, o valor positivo está em uma fonte preta, enquanto o valor negativo na segunda linha está na fonte vermelha, conforme declarado na tag de estilo.
Exemplo 05: Formatação condicional em uma tabela usando a transformação dos dados da tabela
Neste exemplo, usaremos a formatação condicional no elemento TD (dados da tabela) de uma tabela. Este é um tipo de formatação condicional que não segue nenhuma das três regras das condições CSS.
Os atributos de estilo CSS serão adicionados em uma tag de tipo de texto de estilo neste script. O valor dos dados da tabela será a ênfase desta tag. Primeiro, vamos dar à mesa e seu conteúdo uma borda. A primeira propriedade será para a entrada de dados padrão, que será mostrada como entrada pela função de seleção "Att". A segunda propriedade será para o valor, com o valor "0". A função posterior tornará esse valor a visualização padrão. Depois disso, fecharemos o estilo e as tags de cabeça e abriremos o corpo do arquivo html.
Vamos apresentar uma tabela com duas linhas no corpo do arquivo usando a tag TR. A primeira linha incluirá duas colunas: uma para o título da tabela e outra para os dados da tabela. Nos dados da tabela, incluiremos a quantidade monetária que corresponde à propriedade indicada na tag de estilo. A segunda linha será estruturada da mesma forma, mas os dados da tabela serão definidos como “0.”
Como podemos ver no resultado seguinte, a primeira linha tem um valor normal, enquanto a segunda linha tem um espaço reservado, conforme previsto na tag de estilo.
Conclusão:
Neste artigo, discutimos a formatação condicional que o CSS fornece. A formatação condicional geralmente é definida em três regras relacionadas ao suporte, mídia e documento. Todos esses três têm limites diferentes para aplicar alterações na página da web, que foram discutidas e implementadas neste artigo. Então o outro tipo de formatação não segue essas regras e é feito puramente sobre a percepção visual de um indivíduo em questão. Implementamos esse tipo de formatação condicional em um elemento de tabela no bloco de notas ++ neste artigo.