CSS attribute with text line condition

Asked

Viewed 330 times

1

Good morning, these lines make appear in my user-agent is being used by the client, it helped me with problems in the Trident engine that does not interpret the gradient in the text and works very well.

var useragent = document.documentElement;
useragent.setAttribute('data-useragent', navigator.userAgent);
useragent.setAttribute('data-platform', navigator.platform);

for me to put the style I want according to the user-agent I use in CSS this parameter

html[data-useragent*='Trident'] section#id.class{}

"Trident I can switch to anything else like "Section#id.class{}", what I want now is for him to check if there is NO engine I want, I want to know if there is a 'Mobile' in the user-agent and I tried with 

html[data-useragent*!'Mobile']

but it doesn’t work, in case if '=' (has) thought that '!' (has not) would be the opposite but doesn’t work, how could I verify if it doesn’t exist with this criterion? example user-agent with and without Mobile

Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1
Mozilla/5.0 (Windows NT 10.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36
css mobile condition user-agent
  • 1

    html:not([data-useragent*='Mobile']) ?

  • @Caiofelipepera boy, exactly, did not know this :not in CSS, never seen anyone using, it worked, thanks, now I no longer need that lot of javascript to detect mobile. Does this method have a name? so I can search more, know what it is and more ways to use.

  • I’ll assemble a little more complete response then

  • @Caiofelipepereira in this case would be pseudo classes http://www.w3schools.com/css/css_pseudo_classes.asp ?

1 answer

1


You can use the pseudo-selector :not() CSS. It always works with a selector (input, .minha-classe, #essa-div, p, ...) excluding from it what is within the parentheses. There is a technical difference between pseudo-classes and pseudo-Elements, that can be read here. But since you’re a little shy of the question, I won’t go into details.

Imagine the following form, highly simplified

<form>
    <input type="text" name="nome">
    <input type="email" name="email">
    <textarea name="Mensagem" cols="40" rows="10"></textarea>
    <input type="submit">
</form>

If it was your intention to leave all fields 100% long except the button submit, would suffice

textarea, input:not([type="submit"]){
    width: 100%;
}

The :not() accepts any type of selector. For example:

p:not(.minha-classe){
  color: red;
}
<p>1</p>
<p class="minha-classe">2</p>
<p>3</p>
<p>4</p>

and even other pseudo-selectors, such as

p:not(:first-of-type){
  color: red;
}
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>

In your case, just select the HTML which does not have the attribute data-useragent which contains the occurrence of Mobile. This is done as follows

html:not([data-useragent*='Mobile'])

Browser other questions tagged css mobile condition user-agent

You are not signed in. Login or sign up in order to post.