Content-Length: 205141 | pFad | http://github.com/litehtml/litehtml/issues/359

DD @media "screen" queries aren't matched · Issue #359 · litehtml/litehtml · GitHub
Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

@media "screen" queries aren't matched #359

Open
vgmoose opened this issue Jul 27, 2024 · 0 comments
Open

@media "screen" queries aren't matched #359

vgmoose opened this issue Jul 27, 2024 · 0 comments

Comments

@vgmoose
Copy link

vgmoose commented Jul 27, 2024

Thank you for this project!

I'm logging this issue to report what I think is a regression with newer media query css changes: @media query screen CSS seem to be ignored. This can be noticed when rendering Wikipedia's home page.

According to the linked media queries doc, screen should be:

Matches all devices that aren’t matched by print.

And print is:

Matches printers, and devices intended to reproduce a printed display, such as a web browser showing a document in “Print Preview”.

To confirm the behavior there, if you try to print the Wikipedia home page in Chrome/Safari, the blue/green background colors disappear in the print preview. So the intent by Wikipedia is that these backgrounds are only rendered on device, but not when printing the page.

Current master branch:
current master branch


Hardcoding a match for media_type_screen in media_query.cpp:
screenshot with media screen

The CSS on the wikipedia page looks like:

@media screen {
    #mp-left {
        background-color: #f5fffa;
        border-color: #cef2e0;
    }
    .mw-parser-output #mp-left .mp-h2 {
        background-color: #cef2e0;
    }
}

Can also replicate it with the following test page, which doesn't render any of the styling:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Media Query Test Page</title>
    <style>
        @media screen {
            div {
                width: 200px;
                height: 200px;
                font-family: sans-serif;
                margin: 10px;
            }
            .red {
                background-color:red;
            }
            .blue {
                background-color:blue;
            }
        }
    </style>
</head>
<body>
    <div class="red">Red</div>
    <div class="blue">Blue</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@vgmoose








ApplySandwichStrip

pFad - (p)hone/(F)rame/(a)nonymizer/(d)eclutterfier!      Saves Data!


--- a PPN by Garber Painting Akron. With Image Size Reduction included!

Fetched URL: http://github.com/litehtml/litehtml/issues/359

Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy