Skip to content

Support CSS3 media queries #75

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.

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

Open
Jeedey opened this issue Jan 9, 2014 · 9 comments
Open

Support CSS3 media queries #75

Jeedey opened this issue Jan 9, 2014 · 9 comments
Assignees

Comments

@Jeedey
Copy link

Jeedey commented Jan 9, 2014

I try to parse a last Boostrap Css but i got an error to Sabberworm/CSS/Parser.php at line 171.
Maybe it's can parse this line : @media (min-width: 768px) {.lead {font-size: 21px;}}
Any idea?

Thanks

@sabberworm
Copy link
Collaborator

You’re right, complex media queries is one of the last missing CSS3 features. I don’t think I’ll use this any time soon so if you really need it, you should code it yourself and send a pull request.

@ghost ghost assigned sabberworm Jan 9, 2014
@Jeedey
Copy link
Author

Jeedey commented Jan 10, 2014

Finally I used some regex for parse this css, this css parser works great but it's not really good for website performance...
Thank you anyway.

@Jeedey Jeedey closed this as completed Jan 10, 2014
@sabberworm sabberworm reopened this Jan 10, 2014
@sabberworm
Copy link
Collaborator

I think I’ll keep this issue open in case I do get around to implementing this.

@Remo
Copy link

Remo commented Jul 2, 2014

@Jeedey would you mind sharing what you've got so far? Maybe I can help to find a fast solution based on your work.

@sabberworm sabberworm added the css3 label Jul 3, 2014
@sabberworm sabberworm changed the title Identifier expected. Got “:768p” Support CSS3 media queries Jul 3, 2014
@Mipme
Copy link

Mipme commented Jul 10, 2014

Also had problems with media queries, but as they are per sé not important in my case i just clean the file of any media queries. Here are my cleaning approaches – maybe that helps others too:

$cssContent = preg_replace("/@media(\s)*\([^)]+\)(\s)*\{/i", "", $cssContent);
$cssContent = preg_replace("/\}(\s)*\}/i", "", $cssContent);

@rafasashi
Copy link

For your information this function parses css media queries:

https://github.com/recuweb-source/php-dom-scraper/blob/master/functions_dom_parser.php#L200

@Mipme
Copy link

Mipme commented Dec 4, 2015

Since more and more css contains animation keyframes i had to update my media query replacement from above:

$code = preg_replace("/@media\s*\(([^)]+)\)\s*\{([^\{]+\{[^\}]+\})*\}/mi", "/* @media-begin($1) */\n$2\n/* @media-end($1) */\n", $code);

This wraps the media query with comments /* media-begin([condition]) */ and the corresponding end tag.

sabberworm added a commit that referenced this issue Jul 19, 2016
Makes it possible to parse most CSS3 media queries (#75), although not understand them.
@ghost
Copy link

ghost commented Feb 5, 2017

Any (partial?)progress with this 3 year old issue? I'd like to parse Foundation and "wrap" it under specific selector but it uses media queries a lot.

Maybe this could be of some help https://github.com/crossjoin/Css/tree/master/src/Crossjoin/Css/Format/Rule/AtMedia

@sabberworm
Copy link
Collaborator

sabberworm commented Feb 5, 2017

@ivanjaros I’m not currently actively working on new features for the project. But I’m very much maintaining it so if you want to work on this and open a pull-request I’ll do my best to get it merged.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants