Adding the @media operator #2185
Comments
|
What would be the specific filter you need here? |
|
In this case, you need to get rid of the logo branding (VK). For this I planned to use: But when the width changes, these rules don't move the target elements as intended. Yes, I know, can use: But this results in flickering of the logo, which can be just as annoying for users as the branding. Partially flickering can be removed with: But even so, there will be a delay in the appearance of the logo. So I had the idea of adding the @media operator. Then the rule will look like: |
How about: JS-side, uBO would just leverage Window.matchMedia to implement the operator, in which case a match would result in the operator being a passthru, and a non-match would result in an empty set. |
|
The syntax for me is not of fundamental importance, the main thing is the very possibility of using a new operator. |
Related issue: - uBlockOrigin/uBlock-issues#2185 The argument must be a valid media query as documented on MDN, i.e. what appears between the `@media` at-rule and the first opening curly bracket (including the parentheses when required): - https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries Best practice: Use `:matches-media()` after plain CSS selectors, if any. Good: example.com###target-1 > .target-2:matches-media((min-width: 800px)) Bad (though this will still work): example.com##:matches-media((min-width: 800px)) #target-1 > .target-2 The reason for this is to keep the door open for a future optimisation where uBO could convert `:matches-media()`-based filters into CSS media rules injected declaratively in a user stylesheet.
|
Duplicate of #2100 ? |
|
I don't know whether this would also address #2100, I haven't investigated whether the browser properly runs content scripts when rendering the page for printing. The request here is to address filtering issues, while #2100 was not a filtering issue but rather a personal request which I generally decline. |
|
seems we can't set display property via
This is for a case where body is hidden when trying to print - because of a style rule present in inline style - |
|
I don't see |
|
This works: |
|
Yeah it's used with
That works, very nice. |
If you want to apply specific style for specific media query, you need to use the form: In any case, this doesn't work for the specific case you provide because I don't think procedural operators are re-run when printing, I believe the browser just starts to apply declared |
|
Unfortunately, the new operator Video uBO media
I used: If we add similar rules to AdGuard: You can see that the rules work instantly, and there is no flicker. Video AdGuard media
Is it possible to achieve the same smooth operation with uBO? |
I've been working in the mean time to generate declarative CSS where possible when using By the way, for this to work this has to follow what I says in the release notes, so in your case: uBO will convert to use declarative form only when |
|
With this kind of rule, the logo still flickers. And as I said, it is the flickering that I am trying to get rid of. But I still want to thank you for the speed of implementation. |
Yes, the improvements are still not committed. |
|
I installed version 1.43.1b9 and now the rules work instantly. But when resizing the window, when I use several rule options, they start to interfere with each other. |
There is no guarantee of order about where the rules will appear in the generated stylesheet. You will need to use |
|
I got it like this: Is everything right? |
|
Maybe possible move stable css declarations outside matches-media (css minify operation). Then will override unstable width and background-position (also I found |
|
@gorhill Example: The purpose of this rule is to remove the indentation in the left column, in cases where the forecast is blocked (using BitBlock). At the same time, when using the Element picker, the rule works, but only until the page is refreshed. |
|
@dimisa-RUAdList try force updating the list where the rule is present. |
|
@uBlock-user |
My issue was, after the update, one |
|
@uBlock-user |
Found the issue, caused by some changes I made. I will publish a fix shortly. |
Related commit: - 91caed3 Related issue: - uBlockOrigin/uBlock-issues#2185 (comment)
|
@gorhill |
ghost
mentioned this issue
|
Not yet supported by csstree: csstree/csstree#143 |
@uBlock-user Using example.com##+js(rpnt, style, /@media\s+print\s*\{([^{]+\{[^}]+\}[^}]+)+?\}\s*\}/)
or
example.com##+js(rpnt, style, /@media print\{(.*)\}/) |
|
@MasterKia Currently, |
|
|
|
For these should be converted:
postcourier.com.pg family pagespitesti24.ro,samsungtechwin.com,cours-de-droit.net,iptv4best.com,blogvisaodemercado.pt,kapitalis.com,tiempo.hn,winmeen.com,ibps.in,visse.com.br,javsubtitle.co,licensekeys.org,mediahiburan.my,tipssehatcantik.com,jbjbgame.com,viatasisanatate.com,ziarulargesul.ro,globaldefensecorp.com,gossipnextdoor.com,coffeeapps.ir,media.framu.world,immobiliaremia.com,colegiosconcertados.info,bigdatauni.com,rukim.id,visefierbinti.ro,theaircurrent.com,nocturnetls.net,clockks.com,ananda-yoga.ro,poolpiscina.com,infodifesa.it,getective.com,formatatmak.com,drkrok.com,alphagirlreviews.com,kitchennovel.com,voxvalachorum.ro,cracksone.com,day-hoc.org,onlineonderdelenshop.nl,primicia.com.ve,tech-recipes.com,afrikmag.com,maduras.vip,aprendeinglessila.com,kicknews.today,koalasplayground.com,hellokpop.com,hayatbilgileri.com,moneyexcel.com,placementstore.com,neuroteam-metz.de,codedosa.com,liveyourmaths.com##style:has-text(@media print):remove() |
Prerequisites
I tried to reproduce the issue when...
Description
Sometimes the layout of a page changes depending on its width.
For example: https://mail.ru
Screenshot
In this case, the same cosmetic rules act differently. This leads to the need to have an adaptive way of applying the rules.
I propose to add an operator for @media: https://developer.mozilla.org/en/docs/Web/CSS/@media
A specific URL where the issue occurs
https://mail.ru
Steps to Reproduce
unknow
Expected behavior
unknow
Actual behavior
unknow
uBlock Origin version
uBlock Origin development build 1.43.1b7
Browser name and version
Google Chrome 103.0.5060.134
Operating System and version
Windows 7
The text was updated successfully, but these errors were encountered: