PHP-CSS-Parser icon indicating copy to clipboard operation
PHP-CSS-Parser copied to clipboard

Support CSS3 media queries

Open Jeedey opened this issue 11 years ago • 9 comments

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

Jeedey avatar Jan 09 '14 14:01 Jeedey

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.

sabberworm avatar Jan 09 '14 21:01 sabberworm

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 avatar Jan 10 '14 11:01 Jeedey

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

sabberworm avatar Jan 10 '14 11:01 sabberworm

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

Remo avatar Jul 02 '14 13:07 Remo

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);

Mipme avatar Jul 10 '14 15:07 Mipme

For your information this function parses css media queries:

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

rafasashi avatar Jul 16 '15 18:07 rafasashi

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.

Mipme avatar Dec 04 '15 10:12 Mipme

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

ghost avatar Feb 05 '17 13:02 ghost

@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.

sabberworm avatar Feb 05 '17 13:02 sabberworm