CSS attribute with online text condition

1

Good morning, these lines make appear in my which user-agent is being used by the client, this 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 this parameter in CSS

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

"Trident" I can switch to anything else like "section # id.class {}", what I want now is for it to check if there is NO engine I want, I want to know if it's user- agent exists 'Mobile' and I tried with

html[data-useragent*!'Mobile']

but it does not work, in case if '=' (has) thought '!' (it does not) would be the opposite but it does not work, how could I check if it does not exist with this criterion? example of 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
    
asked by anonymous 31.08.2016 / 14:26

1 answer

1

You can use the :not() CSS pseudo-selector. It always works with a selector ( input , .minha-classe , #essa-div , p , ...) excluding what is inside the parentheses. There is a technical difference between pseudo-classes and pseudo-elements , which can be read here . But how does the question run away, I will not go into detail.

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 you intended to leave all fields 100% longer than the submit button,

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 like

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 that does not have the data-useragent attribute that contains the Mobile instance. This is done as follows

html:not([data-useragent*='Mobile'])
    
31.08.2016 / 15:02