diff options
| author | MDN <actions@users.noreply.github.com> | 2022-03-19 00:13:08 +0000 |
|---|---|---|
| committer | MDN <actions@users.noreply.github.com> | 2022-03-19 00:13:08 +0000 |
| commit | 9bf6693b2edd5281c1577856895c55653a41dc01 (patch) | |
| tree | 0143e1d1d5c95776e42d8d9afdddedb13a0827c1 /files/pt-br/web/css/attr()/index.html | |
| parent | 376471eb81e0a3dc263128f834e3c8c22bb9b4d6 (diff) | |
| download | translated-content-9bf6693b2edd5281c1577856895c55653a41dc01.tar.gz translated-content-9bf6693b2edd5281c1577856895c55653a41dc01.tar.bz2 translated-content-9bf6693b2edd5281c1577856895c55653a41dc01.zip | |
[CRON] sync translated content
Diffstat (limited to 'files/pt-br/web/css/attr()/index.html')
| -rw-r--r-- | files/pt-br/web/css/attr()/index.html | 213 |
1 files changed, 0 insertions, 213 deletions
diff --git a/files/pt-br/web/css/attr()/index.html b/files/pt-br/web/css/attr()/index.html deleted file mode 100644 index c5a2139b50..0000000000 --- a/files/pt-br/web/css/attr()/index.html +++ /dev/null @@ -1,213 +0,0 @@ ---- -title: attr -slug: Web/CSS/attr() -tags: - - CSS - - Esquema - - Função CSS - - Internet - - Laioute - - Rede - - Referencia - - Web -translation_of: Web/CSS/attr() ---- -<div>{{CSSRef}}</div> - -<p>A função <strong><code>attr()</code></strong> do <a href="/en-US/docs/Web/CSS">CSS</a> é utilizada para se obter o valor de um determinado atributo do elemento selecionado e usá-lo na folha de estilo. Também pode ser utilizado em <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elementos</a>, nesse caso o valor do atributo no pseudo-elemento do elemento original é retornado.</p> - -<pre class="brush: css no-line-numbers notranslate">/* Uso Simples */ -attr(data-count); -attr(title); - -/* Com o tipo */ -attr(src url); -attr(data-count number); -attr(data-width px); - -/* Com fallback */ -attr(data-count number, 0); -attr(src url, ''); -attr(data-width px, inherit); -attr(data-something, 'default'); -</pre> - -<div class="note"> -<p><strong>Nota:</strong> A função <code>attr()</code> pode ser utilizada com qualquer propriedade CSS, mas o suporte para propriedades que não sejam {{cssxref("content")}} é experimental.</p> -</div> - -<h2 id="Sintaxe">Sintaxe</h2> - -<h3 id="Valores">Valores</h3> - -<dl> - <dt><code>nome-do-atributo</code></dt> - <dd>É o nome do atributo HTML do elemento referenciado no CSS.</dd> - <dt><code><tipo-ou-unidade></code> {{experimental_inline}}</dt> - <dd>É uma palavra-chave representando tanto o tipo quanto o valor do atributo, ou sua unidade, assim como no HTML alguns atributos tem unidades implícitas. Se o uso de <code><tipo-ou-unidade></code> como um valor para determinado atributo for inválido, a expressão <code>attr()</code> será inválida também. Se omitida, o padrão será <code>string</code>. A lista de valores válidos é: - <table class="standard-table"> - <thead> - <tr> - <th scope="col">Palavra-chave</th> - <th scope="col">Tipo Associado</th> - <th scope="col">Comentário</th> - <th scope="col">Valor Padrão</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>string</code></td> - <td>{{cssxref("<string>")}}</td> - <td>O valor do atributo é tratado como um CSS {{cssxref("<string>")}}. NÃO será reparado, e em particular os caracteres usados .</td> - <td>An empty string.</td> - </tr> - <tr> - <td><code>cor</code> {{experimental_inline}}</td> - <td>{{cssxref("<color>")}}</td> - <td>O valor do atributo é analisado como hash (3- ou 6-valores hash) ou a palavra-chave. Precisa ser um valor {{cssxref("<string>")}} CSS válido.<br> - Os espaços do lead e trail são retirados.</td> - <td><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">corAtual</span></font></td> - </tr> - <tr> - <td><code>url</code> {{experimental_inline}}</td> - <td>{{cssxref("<url>")}}</td> - <td>The attribute value is parsed as a string that is used inside a CSS <code>url()</code>function.<br> - Relative URL are resolved relatively to the original document, not relatively to the style sheet.<br> - Leading and trailing spaces are stripped.</td> - <td>The url <code>about:invalid</code> that points to a non-existent document with a generic error condition.</td> - </tr> - <tr> - <td><code>integer</code> {{experimental_inline}}</td> - <td>{{cssxref("<integer>")}}</td> - <td>The attribute value is parsed as a CSS {{cssxref("<integer>")}}. If it is not valid, that is not an integer or out of the range accepted by the CSS property, the default value is used.<br> - Leading and trailing spaces are stripped.</td> - <td><code>0</code>, or, if <code>0</code> is not a valid value for the property, the property's minimum value.</td> - </tr> - <tr> - <td><code>number</code> {{experimental_inline}}</td> - <td>{{cssxref("<number>")}}</td> - <td>The attribute value is parsed as a CSS {{cssxref("<number>")}}. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.<br> - Leading and trailing spaces are stripped.</td> - <td><code>0</code>, or, if <code>0</code> is not a valid value for the property, the property's minimum value.</td> - </tr> - <tr> - <td><code>length</code> {{experimental_inline}}</td> - <td>{{cssxref("<length>")}}</td> - <td>The attribute value is parsed as a CSS {{cssxref("<length>")}} dimension, that is including the unit (e.g. <code>12.5em</code>). If it is not valid, that is not a length or out of the range accepted by the CSS property, the default value is used.<br> - If the given unit is a relative length, <code>attr()</code>computes it to an absolute length.<br> - Leading and trailing spaces are stripped.</td> - <td><code>0</code>, or, if <code>0</code> is not a valid value for the property, the property's minimum value.</td> - </tr> - <tr> - <td><code>em</code>, <code>ex</code>, <code>px</code>, <code>rem</code>, <code>vw</code>, <code>vh</code>, <code>vmin</code>, <code>vmax</code>, <code>mm</code>, <code>cm</code>, <code>in</code>, <code>pt</code>, or <code>pc</code> {{experimental_inline}}</td> - <td>{{cssxref("<length>")}}</td> - <td>The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. <code>12.5</code>), and interpreted as a {{cssxref("<length>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.<br> - If the given unit is a relative length, <code>attr()</code>computes it to an absolute length.<br> - Leading and trailing spaces are stripped.</td> - <td><code>0</code>, or, if <code>0</code> is not a valid value for the property, the property's minimum value.</td> - </tr> - <tr> - <td><code>angle</code> {{experimental_inline}}</td> - <td>{{cssxref("<angle>")}}</td> - <td>The attribute value is parsed as a CSS {{cssxref("<angle>")}} dimension, that is including the unit (e.g. <code>30.5deg</code>). If it is not valid, that is not an angle or out of the range accepted by the CSS property, the default value is used.<br> - Leading and trailing spaces are stripped.</td> - <td><code>0deg</code>, or, if <code>0deg</code> is not a valid value for the property, the property's minimum value.</td> - </tr> - <tr> - <td><code>deg</code>, <code>grad</code>, <code>rad</code> {{experimental_inline}}</td> - <td>{{cssxref("<angle>")}}</td> - <td>The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. <code>12.5</code>), and interpreted as an {{cssxref("<angle>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.<br> - Leading and trailing spaces are stripped.</td> - <td><code>0deg</code>, or, if <code>0deg</code> is not a valid value for the property, the property's minimum value.</td> - </tr> - <tr> - <td><code>time</code> {{experimental_inline}}</td> - <td>{{cssxref("<time>")}}</td> - <td>The attribute value is parsed as a CSS {{cssxref("<time>")}} dimension, that is including the unit (e.g. <code>30.5ms</code>). If it is not valid, that is not a time or out of the range accepted by the CSS property, the default value is used.<br> - Leading and trailing spaces are stripped.</td> - <td><code>0s</code>, or, if <code>0s</code> is not a valid value for the property, the property's minimum value.</td> - </tr> - <tr> - <td><code>s</code>, <code>ms</code> {{experimental_inline}}</td> - <td>{{cssxref("<time>")}}</td> - <td>The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. <code>12.5</code>), and interpreted as an{{cssxref("<time>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.<br> - Leading and trailing spaces are stripped.</td> - <td><code>0s</code>, or, if <code>0s</code> is not a valid value for the property, the property's minimum value.</td> - </tr> - <tr> - <td><code>frequency</code> {{experimental_inline}}</td> - <td>{{cssxref("<frequency>")}}</td> - <td>The attribute value is parsed as a CSS {{cssxref("<frequency>")}} dimension, that is including the unit (e.g. <code>30.5kHz</code>). If it is not valid, that is not a frequency or out of the range accepted by the CSS property, the default value is used.</td> - <td><code>0Hz</code>, or, if <code>0Hz</code> is not a valid value for the property, the property's minimum value.</td> - </tr> - <tr> - <td><code>Hz</code>, <code>kHz</code> {{experimental_inline}}</td> - <td>{{cssxref("<frequency>")}}</td> - <td>The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. <code>12.5</code>), and interpreted as a {{cssxref("<frequency>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.<br> - Leading and trailing spaces are stripped.</td> - <td><code>0Hz</code>, or, if <code>0Hz</code> is not a valid value for the property, the property's minimum value.</td> - </tr> - <tr> - <td><code>%</code> {{experimental_inline}}</td> - <td>{{cssxref("<percentage>")}}</td> - <td>The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. <code>12.5</code>), and interpreted as a {{cssxref("<percentage>")}}. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.<br> - If the given value is used as a length, <code>attr()</code>computes it to an absolute length.<br> - Leading and trailing spaces are stripped.</td> - <td><code>0%</code>, or, if <code>0%</code> is not a valid value for the property, the property's minimum value.</td> - </tr> - </tbody> - </table> - </dd> - <dt><code><fallback></code> {{experimental_inline}}</dt> - <dd>The value to be used if the associated attribute is missing or contains an invalid value. The fallback value must be valid where <code>attr()</code> is used, even if it is not used, and must not contain another <code>attr()</code> expression. If <code>attr()</code> is not the sole component value of a property, its <code><fallback></code> value must be of the type defined by <code><type-or-unit></code>. If not set, CSS will use the default value defined for each <code><type-or-unit></code>.</dd> -</dl> - -<h3 id="Sintaxe_formal">Sintaxe formal</h3> - -{{csssyntax}} - -<h2 id="Exemplos">Exemplos</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html notranslate"><p data-foo="hello">world</p> -</pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css notranslate">p::before { - content: attr(data-foo) " "; -} -</pre> - -<h3 id="Resultado">Resultado</h3> - -<p>{{EmbedLiveSample("Examples")}}</p> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Status</th> - <th scope="col">Comentário</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Values', '#attr-notation', 'attr()')}}</td> - <td>{{Spec2('CSS3 Values')}}</td> - <td>Added two optional parameters; can be used on all properties; may return other values than {{cssxref("<string>")}}. These changes are experimental and may be dropped during the CR phase if browser support is too small.</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'generate.html#x18', 'attr()')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>Limited to the {{cssxref("content")}} property; always return a {{cssxref("<string>")}}.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2> - -<p>{{Compat("css.types.attr")}}</p> |
