YUI Reset CSS Faz com que <strong><em>isso não funcione</em></strong>

StackOverflow https://stackoverflow.com/questions/20107

  •  09-06-2019
  •  | 
  •  

Pergunta

Esta linha no YUI Redefinir CSS está causando problemas para mim:

address,caption,cite,code,dfn,em,strong,th,var {
    font-style: normal;
    font-weight: normal;
}

Isso faz meu em não itálico e meu strong não ousado.O que está bem.Eu sei como substituir isso em minha própria folha de estilo.

strong, b 
{
  font-weight: bold;
}

em, i 
{
  font-style: italic;
}

O problema surge quando tenho um texto que é ambos em e strong. 

<strong>This is bold, <em>and this is italic, but not bold</em></strong>

Minha regra para strong torna ousado, mas a regra da YUI para em torna tudo normal novamente.Como faço para corrigir isso?

Foi útil?

Solução

Se a sua declaração forte vier depois da da YUI, a sua deverá substituí-la.Você pode forçar assim:

strong, b, strong *, b * { font-weight: bold; }
em, i, em *, i * { font-style: italic; }

Se você ainda oferece suporte ao IE7, precisará adicionar !important.

strong, b, strong *, b * { font-weight: bold !important; }
em, i, em *, i * { font-style: italic !important; }

Isso funciona - veja você mesmo:

/*YUI styles*/
address,caption,cite,code,dfn,em,strong,th,var {
  font-style: normal;
  font-weight: normal;
}
/*End YUI styles =*/

strong, b, strong *, b * {
  font-weight: bold;
}

em, i, em *, i * {
  font-style: italic;
}
 <strong>Bold</strong> - <em>Italic</em> - <strong>Bold and <em>Italic</em></strong>

Outras dicas

Eu usaria esta regra para substituir a redefinição do YUI:

strong, b, strong *, b *
{
  font-weight: bold;
}

em, i, em *, i *
{
  font-style: italic;
}

Se, além de usar YUI reset.css, você também usar YUI base.css, estará tudo pronto com um conjunto padrão de estilos básicos para vários navegadores.

LINK: http://developer.yahoo.com/yui/base/

Tive um problema semelhante quando adicionei o YUI Reset ao topo do meu arquivo CSS padrão.Descobri que a melhor coisa para mim era simplesmente remover todos os

font-weight: normal;

declarações do YUI Reset.Não percebi que isso afetou algo "entre navegadores".

Todas as minhas declarações foram após a redefinição do YUI, então não sei por que elas não tiveram efeito.

Contanto que seus estilos sejam carregados após os redefinidos, eles deverão funcionar.Que navegador é esse?porque eu mesmo trabalho de maneira semelhante e não encontrei esse problema, me pergunto se há algo errado em meus testes.

As folhas de estilo de redefinição são melhor usadas como base.Se você não quiser redefini-los ou fortes, remova-os da folha de estilo.

Como Chris disse, você não precisa usar o CSS exato que eles fornecem religiosamente.Gostaria apenas de salvar uma cópia em seu servidor e editar de acordo com suas necessidades.

Eu sugeriria evitar qualquer coisa que envolva hackear os arquivos YUI.Você precisa ser capaz de atualizar bibliotecas externas no futuro e se o seu site depender de versões editadas, há uma boa chance de ele ficar confuso.Acho que esta é uma boa prática geral para qualquer biblioteca de terceiros que você usa.

Então eu pensei esse a resposta estava entre as melhores

Se, além de usar YUI reset.css, você também usar YUI base.css, estará tudo pronto com um conjunto padrão de estilos básicos para vários navegadores.

Entendo o que você está dizendo.Eu acho que você pode adicionar uma regra CSS como esta:

strong em { font-weight: bold; }

ou:

strong * { font-weight: bold; }

Achei que tinha uma solução ideal:

strong, b 
{
  font-weight: bold;
  font-style: inherit;
}

em, i 
{
  font-style: italic;
  font-weight: inherit;
}

Infelizmente, o Internet Explorer não suporta "herdar". :-(

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top