0

Olá, sou iniciante em CSS e estou criando um tema negro para o site do Globo usando Stylish, enfim, gostaria de saber se é possível aplicar um atributo/regra que seja só respeitada dentro um site que tenha tal domínio ou se for detectado uma substring na URL do site. Neste caso, por exemplo, eu gostaria apenas de transformar essas fontes negras em #BFBFBF para este site que contêm "fina-estampa" na URL.

Exemplo de página com linhas negras em parêntesis

Não entendo nada de PHP ou Javascript, então, é possível fazer isso usando apenas CSS? Já chequei os ID's da página e não há nada específico para ela, então fiquei perdido.

Obrigado!

4
  • Meu eu acho que a sua lógica que está errada, não seria mais interessante coloca um classe no Body e mudar tudo que está dentro dele do que mandar um usuário para outra página na qual dependendo da URL vai usar um .CSS diferente...? Na verdade eu nunca vi um Dark Mode que leva o usuário para outra página ou que muda a URL...
    – hugocsl
    Commented 21/05/2020 às 20:06
  • 1
    Existe uma regra semelhante aos media queries, que ainda esta em fase de proposta e é considerado experimental, o @document, no entanto só funciona no FF61+ (requer o prefixo -moz), isso pq como disse, ainda esta em fase proposta, se for usar em Chrome/Chromium esqueça... PS: PHP não tem nada haver com Stylish, PHP é uma linguagem que rodado lado do servidor apenas.
    – Syzoth
    Commented 21/05/2020 às 20:28
  • É que a página do Globo.com tem várias sub-páginas, como Esportes, Novelas, Sociedade, etc, a maioria das classes é parecida, mas algumas coisas mudam devido ao leiaute. Usando o Stylish com o domínio Globo.com eu consigo englobar todos eles. O meu único problema é com especificamente a página desta novela que fica negro dentro do parêntesis, e caso eu mude, TODAS as páginas vão ficar com links (a) com a mesma cor, o que eu não gostaria, já que geralmente a cor dos links da globo são indicadores pra qual tipo de conteúdo você está indo...
    – Aleczk
    Commented 21/05/2020 às 22:46
  • 1
    @AlecsanderCamilo eu já citei na resposta, como usar o regex, veja lá.
    – Syzoth
    Commented 21/05/2020 às 22:48

1 Resposta 1

4

Existe uma regra semelhante aos @media (usado para diversas situações incluindo media-query), que ainda esta em fase de proposta e é considerado experimental, o @document, no entanto para páginas web normais (não estou falando do Stylish) só funciona no Firefox 61+ (requer o prefixo -moz), isso porque como disse, ainda esta em fase de proposta, se for usar em Chrome/Chromium esqueça.

No entanto ao ler a documentação do Stylish:

Eles afirmam:

The @-moz-document format is the supported format when posting on userstyles.org. The site software handles converting to other formats for browsers that do not support it.

Ou seja, dentro do Stylish é funcional para suportar outros navegadores além do Firefox.

Exemplo pra aplicar CSS pra uma URL exata:

@-moz-document url("http://pt.stackoverflow.com/questions/453131/É-possível-aplicar-um-atributo-em-css-apenas-para-uma-página-que-contém-uma-subs") {
    body {
        background-color: black !important;
    }
}

Exemplo pra aplicar CSS para um domínio especifico, ignorando se é HTTPS ou HTTP ou a página que estiver:

@-moz-document domain("pt.stackoverflow.com") {

Exemplo pra aplicar CSS para uma URL que comece com exatamente:

@-moz-document url-prefix("https://pt.stackoverflow.com/questions/") {

e no seu caso a solução será com regex, algo como mais ou menos assim:

@-moz-document regexp('://.*\\.globo\\.com/.*fina-estampa.*') {

Eu não vou ficar ensinando regex, porque não é algo que se aprende do dia pra noite (apesar de alguns Youtubers e artigos e cursos afirmarem que você pode aprender coisas assim em poucas aulas)

Se tiver uma duvida mais especifica sobre regex então aprenda um pouco e depois formule uma pergunta só sobre regex.

Note que se a URL for esta https://gshow.globo.com/novelas/fina-estampa/, o url-prefix já resolveria:

@-moz-document url-prefix("https://gshow.globo.com/novelas/fina-estampa/") {
    ... SEU CSS AQUI ...
}
5
  • Obrigado pela resposta! O último código deu certo, embora eu use o Chrome, o Stylish tem uma forma de converter. A questão é que eu teria que fazer outra section com o url-prefix e assim que colei o que você postou ele detectou o @moz e me sugeriu isso. Deu certo! Muito obrigado!
    – Aleczk
    Commented 21/05/2020 às 22:53
  • 1
    @AlecsanderCamilo foi o que eu disse na resposta, o Stylish converte (faz "funcionar").
    – Syzoth
    Commented 21/05/2020 às 22:54
  • 1
    @AlecsanderCamilo editei a resposta com uma sugestão alternativa para outros problemas nada relacionados ao Stylish e se a resposta resolveu o seu problema marque-a como correta, fico agradecido.
    – Syzoth
    Commented 21/05/2020 às 23:03
  • 1
    Removi a alternativa, eu me confundi, esqueci do nivel do head ~ body, não teria como funcionar.
    – Syzoth
    Commented 21/05/2020 às 23:20
  • Interessante esse esquema de usar a url como "seletor". Espero que ganhe mais suporte!
    – hugocsl
    Commented 22/05/2020 às 11:10

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .