Report incorrectly removed content • motortrend.com

Where We Advertise
Our site displays advertisements at the very top of many pages and in a right column on most others.

What Is Missing?
We have recently noticed sections of non-advertisement content being hidden when ad blockers are enabled. We have seen the missing content with uOrigin and AdBlock in Google Chrome and Firefox.

Root Cause Analysis
After extensive research, we have found that several of our styling classes have been included on EasyList. We utilize TailwindCSS for our site's styling. TailwindCSS is a widely popular styling library that delegates individual class names to apply small chunks of style in a highly reusable fashion. Because we style every element on our site utilizing TailwindCSS class names defined by their library, ad containers and content alike, ad containers that have been flagged and included on EasyList apply to more than just ad containers, causing non-advertisement content to be removed.

Examples
Below are the offending rules in EasyList that are causing issues.

motortrend.com##.justify-center.flex-colmotortrend.com##.lg\:min-h-\[90px\]motortrend.com##.min-h-\[120px\]www.motortrend.com##.min-h-\[90px\]motortrend.com,mumsnet.com##.min-w-\[300px\]

Going from top to bottom, the rules applied do the following things:

• .justify-center - Tailwind Documentation - Applies the justify-content: center; CSS directive.

• .flex-col - Tailwind Documentation - Applies the flex-direction: column; CSS directive.

• .lg:min-h-[90px] - Tailwind Documentation - At our lg breakpoint, applies the min-height: 90px; CSS directive.

• .min-h-[120px] - Tailwind Documentation - Applies the min-height: 120px; CSS directive.

• .min-w-[300px] - Tailwind Documentation - Applies the min-width: 300px; CSS directive.

False Positives
The nature of CSS classes are to apply reusable style, so blocking content based on purely CSS classes alone is, by nature, prone to false positives. This problem is exasperated in this specific case due to the atomic level in which TailwindCSS structures its classes (lots of small classes over lots of elements), as opposed to more traditional approaches where class names often defined a lot of CSS directives (fewer, larger classes over only a few elements).

Our Request
We kindly ask that you remove these standard, TailwindCSS classes from EasyList for motortrend.com, so that our non-advertisement content is not hidden from our visitors.

Closing Thoughts
We whole-heartedly understand and respect user's wishes, wants, and needs to block content they do not wish to see on their devices. However, there are usually other ways to identify this content. For example, all of our ad containers use data attributes to identify themselves as advertisements.

Additionally, something else we noticed as we analyzed EasyList is that many other sites have very obvious TailwindCSS classes being blocked. As we are not the maintainers of this list or project and have no knowledge of how your list gets populated with data, I'm not sure if any recommendations we could suggest would be helpful. However, it might be beneficial to explore popular styling libraries, specifically TailwindCSS and prevent those standard class names which are part of the core library be excluded as selectors for ads, instead opting for ids, data attributes, or other DOM elements that can better, and more accurately, identify unwanted content.

Statistics: Posted by mirigoyen — Thu May 30, 2024 4:43 pm — Replies 3 — Views 116