Exclusões

As Exclusões CSS (Folhas de Estilos em Cascata) são uma novidade no Internet Explorer 10 e nos aplicativos da Windows Store que usam JavaScript. Com as Exclusões CSS, os autores da Web agora podem circundar o texto para que ele envolva completamente os elementos, evitando assim as limitações tradicionais das flutuações. Em vez de limitar a flutuação de elementos para a esquerda ou a direita em relação à sua posição no fluxo do documento, as Exclusões CSS podem ser posicionadas a uma distância especificada da parte superior, inferior, lado esquerdo ou direito de um bloco de conteúdo, enquanto a parte restante do documento flutua.

O suporte para Exclusões CSS no Internet Explorer 10 e nos aplicativos da Windows Store que usam JavaScript permite cenários como o ilustrado na imagem a seguir, em que o aplicativo mostrado é disposto de maneira semelhante à que você poderia criar uma página em um aplicativo de editoração eletrônica, como Microsoft Word ou Adobe InDesign.

Exemplo de uso de flutuações posicionadas, onde uma imagem é disposta no meio de um bloco de texto.

Além disso, você pode combinar Exclusões CSS com outros novos recursos de layout do Internet Explorer 10 e dos aplicativos da Windows Store que usam JavaScript, como Grade CSS, Multicoluna CSS e Flexbox CSS. As Exclusões CSS estão definidas na versão preliminar de Exclusões e formas CSS do W3C (World Wide Web Consortium). As subseções a seguir fornecem uma breve visão geral das Exclusões CSS e como implementá-las.

Observação  Devido ao status de versão preliminar das Exclusões CSS, as propriedades descritas neste tópico devem ser usadas com o prefixo de fornecedor específico da Microsoft, ou seja, "-ms-", para trabalhar com o Internet Explorer 10 e os aplicativos da Windows Store que usam JavaScript no Windows 8. Além disso, esteja ciente de que as propriedades e a sintaxe definidas na especificação das Exclusões CSS podem não corresponder exatamente àquelas descritas neste tópico. Como o desenvolvimento da especificação continua, isso pode mudar.

Termos de exclusão definidos

Observação  Lembre-se de que a sintaxe para Exclusões CSS (anteriormente conhecidas como "flutuações posicionadas") foi alterada nos pré-lançamentos anteriores.

Ao aprender sobre exclusões, é útil aprender os seguintes termos, os quais são definidos na seção Definições da especificação Exclusões CSS3. Também é uma boa idéia para conhecer os termos associados com o modelo de caixa CSS.

Elemento de exclusão

A propriedade -ms-wrap-flow faz de um elemento um elemento de exclusão quando ele possui um valor calculado diferente de auto. Esta propriedade especifica que o elemento de exclusão (a exclusão) pode ser posicionado de várias maneiras (descritas nas seções a seguir), e esse conteúdo em linha será ajustado ao redor da exclusão de uma forma semelhante a como ela envolve elementos flutuantes.

Área de exclusão

A área de exclusão é a área usada para excluir o conteúdo de fluxo embutido ao redor de um elemento de exclusão. Em termos do modelo de caixa CSS, a área de exclusão é equivalente à caixa da borda. No momento, a área de exclusão no Internet Explorer 10 e em aplicativos da Windows Store que usam JavaScript é sempre um retângulo.

Área flutuante

A área flutuante é a área usada para excluir o conteúdo de fluxo embutido ao redor de um elemento flutuante. Por padrão, a área flutuante é a caixa da margem do elemento float. No momento, a área de exclusão no Internet Explorer 10 e em aplicativos da Windows Store que usam JavaScript é sempre um retângulo.

Área de conteúdo

A área de conteúdo é a área usada para excluir o conteúdo de fluxo em linha ao redor de um elemento. Por padrão, a área de conteúdo é equivalente à caixa de conteúdo.

Contexto do encapsulamento

O contexto de encapsulamento de um elemento é uma coleção de áreas de exclusão, e é usado para encapsular o conteúdo do fluxo em linha. Um elemento encapsula seu conteúdo de fluxo em linha na área que corresponde à subtração de seu contexto de encapsulamento de sua própria área de conteúdo.

Um elemento herda seu contexto de encapsulamento do bloco de conteúdo, a menos que ele redefina especificamente o uso da propriedade -ms-wrap-through.

O elemento de exclusão

A propriedade -ms-wrap-flow torna um elemento em um elemento de exclusão.

PropriedadeDescrição

-ms-wrap-flow

As palavras-chave a seguir são válidas para esta propriedade.

auto

Valor inicial. Para elementos flutuantes, uma exclusão é criada; para pois todos os outros elementos, a exclusão não é criada.

exemplo de -ms-wrap-side:auto
both

O conteúdo de fluxo interno pode fluir por todos os lados da exclusão.

exemplo de -ms-wrap-side:both
start

O conteúdo do fluxo embutido pode quebrar na borda inicial da área de exclusão, mas deve deixar a área depois da borda final da área de exclusão vazia.

exemplo de -ms-wrap-side:left
end

O conteúdo de fluxo embutido pode quebrar depois da borda final da área de exclusão, mas deve deixar a área antes da borda inicial da área de exclusão vazia.

exemplo de -ms-wrap-side:right
maximum

O conteúdo de fluxo interno pode quebrar no lado da exclusão com o maior espaço disponível para a linha fornecida, e deve deixar o outro lado da exclusão vazio.

clear

O conteúdo de fluxo em linha só encapsular no lado direito da área de exclusão, mas deve deixar as áreas em relação às bordas de início e término da caixa de exclusão vazias.

 

Quando o valor calculado da propriedade -ms-wrap-flow for auto, o elemento não se torna um elemento de exclusão a menos que seu valor calculado da propriedade float não seja none. Nesse caso, o elemento contribui para a caixa da borda em relação ao seu contexto de encapsulamento do bloco de conteúdo e aos fluxos de conteúdo ao redor dele de acordo com a propriedade clear. Para obter mais informações sobre o impacto dos elementos de exclusão sobre o fluxo de conteúdo, veja a seção Definições da especificação Exclusão CSS3.

Encapsulando conteúdo em torno de uma exclusão

A propriedade -ms-wrap-through especifica como o conteúdo deve circundar um elemento de exclusão. Você pode usá-lo para controlar o efeito de exclusões—por exemplo, para fazer com que um bloco circunde um elemento de exclusão e outro para interseccionar o mesmo elemento de exclusão.

PropriedadeDescrição

-ms-wrap-through

Essas palavras-chave são definidas da seguinte forma:

wrap

Valor inicial. O elemento herda seu contexto de encapsulamento do nó pai. Seu conteúdo em linha descendente envolve exclusões definidas fora do elemento.

none

O elemento não herda seu contexto de encapsulamento do nó pai. Seus descendentes estão apenas sujeitos a formas de exclusão definidas dentro do elemento.

 

Deslocamento da forma de encapsulamento interno

A propriedade -ms-wrap-margin especifica uma margem que é usada para deslocar a forma de encapsulamento interno a partir de outras formas.

PropriedadeDescrição

-ms-wrap-margin

Desloca o encapsulamento de conteúdo do fluxo em linha do lado de fora das exclusões. Deslocamentos criados pela propriedade -ms-wrap-margin são deslocados a partir do lado de fora da exclusão. Esta propriedade pode ser definida para qualquer valor de comprimento suportado.

 

O exemplo na próxima seção aplica o -ms-wrap-margin ao div verde flutuante.

Exclusões CSS e a grade CSS

Você também pode usar as Exclusões CSS com a nova funcionalidade de Grade CSS no Internet Explorer 10 e nos aplicativos da Windows Store em JavaScript. Por exemplo, a imagem a seguir ilustra uma exclusão dentro de uma grade 3×3. A grade contém um elemento div com o conteúdo embutido que se estende por todas as três linhas e todas as três colunas. A exclusão foi colocada na célula de grade na linha 2, coluna 2. O conteúdo flui em torno da exclusão

O uso da amostra de flutuações posicionadas usadas com a Grade, onde uma imagem é colocada na Grade e o conteúdo flui em torno dela.

Você pode exibir essa página. (Internet Explorer 10 é necessário para que esta página seja exibida corretamente.)

A marcação desta página é a seguinte:


<!DOCTYPE html>
<html>
<head>
  <title>CSS3 Exclusions Sample</title>
  <style type="text/css">
    .container {
      font-size: small;
      width: 98%;
      height: 100%;
      display: -ms-grid;
      -ms-grid-columns: 1fr 1fr 1fr;
      -ms-grid-rows: 1fr 1fr 1fr;
    }
    .exclusion {
      -ms-grid-row: 2;
      -ms-grid-column: 2;
      background-color: lime;
      -ms-wrap-flow: both;
      padding: 10px;
      -ms-wrap-margin: 15px;
    }
    .dummy_text {
      -ms-grid-row: 1;
      -ms-grid-column: 1;
      -ms-grid-column-span: 3;
      -ms-grid-row-span: 3;
    }
  </style>
</head>
<body>
  <div class="body">
    <h1>CSS3 Exclusions Sample</h1>
    <div class="container">
      <div class="exclusion">
        Exclusion positioned at row 2, column 2.
      </div>
      <div class="dummy_text">
        <p>Lorem ipsum dolor sit amet...</p>
      </div>
    </div>
  </div>
</body>
</html>


Referência de API

Exclusions

Amostras e tutoriais

Exemplo de exclusões CSS

Demonstrações do Test Drive do Internet Explorer

Prática: flutuações posicionadas

Postagens no blog do IE

Visualização da plataforma do IE10 e recursos CSS para layouts adaptáveis

Especificação

Exclusões e formas CSS

 

 

Mostrar:
© 2014 Microsoft