media queries will be preferred over later defined global selectors

GoogleCodeExporter commented 8 years ago

I found the bug when using and overriding padding in Bootstrap .jumbotron 
classes.

Description: To simplify the problem look at this example to provoke the 
respond.js bug:

    .shouldBeGreen {
      display: table-cell;
      background-color: gray;
      width: 100px;
      height: 100px;
      text-align: center;
      vertical-align: middle;
    }

    @media screen and (min-width: 50px) {
      .shouldBeGreen {
        background-color: red;
        font-weight: bold;
      }
    }

    /* Later in the CSS or in another LESS file... */

    /* Will be overridden by respond.js */
    .shouldBeGreen {
      background-color: green;
    }

Open my attached example page in Chrome/FF/Opera/Safari and IE8 (emulated or 
not) to compare the problem.

Behaviour: The script picks all relevant media query parts and puts them after 
the source CSS file which results in overriding all associated selectors 
defined after the media query.

Solution: I racked my brains about this, but don't have a solution at this 
point.

Here is my bug report to Respond.js which has exactly the same problem: 
https://github.com/scottjehl/Respond/issues/225

Original issue reported on code.google.com by www.krnl...@gmail.com on 16 Sep 2013 at 1:58

Attachments:

css3-mediaqueries.js-bug.zip

GoogleCodeExporter commented 8 years ago

Back from the dead... There is a new version of the script. It has some CSS 
parsing and processing improvements. If you're still using it, or would like to 
try again, could you confirm that this issue is solved or not?

Original comment by wou...@dynora.nl on 4 Apr 2014 at 11:46

GoogleCodeExporter commented 8 years ago

I'll try this tonight, thanks :)

Original comment by www.krnl...@gmail.com on 4 Apr 2014 at 3:42

GoogleCodeExporter commented 8 years ago

Did it work? I have still the same problem with my code. Using a child theme in 
Wordpress overriding the parent them does not work, because media queries 
always applied last.

Original comment by deh3...@gmail.com on 28 Aug 2014 at 12:15

GoogleCodeExporter commented 8 years ago

Hey man! Sorry, I completely forgot about the problem! I tried the latest 
version of your script 
(https://code.google.com/p/css3-mediaqueries-js/source/browse/trunk/css3-mediaqu
eries_src.js) but the actual problem remains the same in an emulated IE8 (on a 
native Win8.1 IE11). As mentioned earlier, an emulated IE behaves the same as a 
native in this case, but I don't have a native IE8 atm.

Original comment by www.krnl...@gmail.com on 28 Aug 2014 at 1:40

webmechanicx / css3-mediaqueries-js

media queries will be preferred over later defined global selectors #36