One Invalid Pseudo Selector Equals an Entire Ignored Selector

rfp-robotRFP ROBOT: Website Request for Proposal Generator

The time has come for a new website (or website redesign), which means you need to write a website request for proposal or web RFP. A Google search produces a few examples, but they vary wildly and don’t seem to speak really to your goals for developing or redesigning a new website. You need to write a website RFP that will clearly articulate your needs and generate responses from the best website designers and developers out there. But how?

Have no fear, RFP Robot is here. He will walk you through a step-by-step process to help you work through the details of your project and create a PDF formatted website design RFP that will provide the information vendors need to write an accurate bid. RFP Robot will tell you what info you should include, point out pitfalls, and give examples.


Perhaps you know this one: if any part of a selector is invalid, it invalidates the whole selector. For example:
div, span::butt {
background: red;
}
Even though div is a perfectly valid selector, span:butt is not, thus the entire selector is invalidated — neither divs nor span::butt elements on the page will have a red background.

Normally that’s not a terribly huge problem. It may even be even useful, depending on the situation. But there are plenty of situations where it has kind of been a pain in the, uh, <code>:butt.
Here’s a classic:
::selection {
background: lightblue;
}
For a long time, Firefox didn’t understand that selector, and required a vendor prefix (::-moz-selection) to get the same effect. (This is no longer the case in Firefox 62+, but you take the point.)
In other words, this wasn’t possible:
/* would break for everyone */
::selection, ::-moz-selection {
background: lightblue;
}
That would break for browsers that understood ::selection and break for Firefox that only understood ::-moz-selection. It made it ripe territory for a preprocessor @mixin, that’s for sure.
That was annoying enough that browsers have apparently fixed it. In a conversation with Estelle Weyl, I learned that this is being changed. She wrote in the MDN docs:
Generally, if there is an invalid pseudo-element or pseudo-class within in a chain or group of selectors, the whole selector list is invalid. If a pseudo-element (but not pseudo-class) has a -webkit- prefix, As of Firefox 63, Blink, Webkit and Gecko browsers assume it is valid, not invalidating the selector list.
This isn’t for any selector; it’s specifically for pseudo-elements. That is, double colons (::).
Here’s a test:
See the Pen Ignored Invalid Selecotrs??? by Chris Coyier (@chriscoyier) on CodePen.
I’d call that a positive change.
The post One Invalid Pseudo Selector Equals an Entire Ignored Selector appeared first on CSS-Tricks.
Source: CssTricks

Posted on October 5, 2018 in code, css, Drupal Developer, drupal developer austin, Drupal Development, Expert Drupal Development, firefox, The, Web Design Services, webkit

Share the Story

Back to Top