Re: [css-d] MQ syntax

[Tom Livingston]

So I should repeat the 'only screen' in the second part. Makes sense,
thanks Philippe.

I'm not sure what was going on, but I was wrong unsuspecting the MQ.
Cleared up the issue elsewhere. Thanks for looking at this though.


On Fri, May 1, 2015 at 8:03 PM Philippe Wittenbergh  wrote:

>
> > Le 2 mai 2015 à 04:27, Tom Livingston  a écrit :
> >
> > Drawing a blank on this. Is this correct syntax for this MQ?
> >
> > @media only screen and (min-width: 600px) and
> > (-webkit-min-device-pixel-ratio: 1.5), (min-width: 600px) and
> > (min-resolution: 144dpi){ rules here }
>
> Nothing wrong with that, but the 2 sets are not equal:
> * for webkit/blink based browsers 3 conditions must be true:
> 'only screen' + 'min-width' + ' -webkit-min-device-pixel-ratio'
>
> * for other browsers (and webkit/blink based browsers will also understand
> this) there are only 2 conditions that must be true:
> 'min-width' + 'min-resolution'
>
> > I'm using this in picturefill (ver 1.x) and I think it's causing an
> > error and need another pair of eyes. Picturefill use is:
> >
> > 
>
> IDKN ? what error do you get? a test case would be useful…
>
> Philippe
> --
> Philippe Wittenbergh
> http://l-c-n.com/
>
>
>
>
>
>
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] MQ syntax

[Philippe Wittenbergh]

> Le 2 mai 2015 à 04:27, Tom Livingston  a écrit :
> 
> Drawing a blank on this. Is this correct syntax for this MQ?
> 
> @media only screen and (min-width: 600px) and
> (-webkit-min-device-pixel-ratio: 1.5), (min-width: 600px) and
> (min-resolution: 144dpi){ rules here }

Nothing wrong with that, but the 2 sets are not equal:
* for webkit/blink based browsers 3 conditions must be true:
'only screen' + 'min-width' + ' -webkit-min-device-pixel-ratio'

* for other browsers (and webkit/blink based browsers will also understand 
this) there are only 2 conditions that must be true:
'min-width' + 'min-resolution'

> I'm using this in picturefill (ver 1.x) and I think it's causing an
> error and need another pair of eyes. Picturefill use is:
> 
> 

IDKN ? what error do you get? a test case would be useful…

Philippe
--
Philippe Wittenbergh
http://l-c-n.com/





__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Flex items lose some padding in Firefox

[Philippe Wittenbergh]

> Le 2 mai 2015 à 06:50, David Hucklesby  a écrit :
> 
> This is the bare bones of a grid of thumbnails. Works okay in Opera and 
> Chrome,
> but the top and bottom padding disappear in Firefox:
> 
> 
> 
> FWIW this does not happen in a float or inline-block layout.

The answer is here:
https://drafts.csswg.org/css-flexbox/#item-margins

[quote]
Percentage margins and paddings on flex items are always resolved against their 
respective dimensions; unlike blocks, they do not always resolve against the 
inline dimension of their containing block.
[/quote]

given that the height of your flex items () is auto, the vertical 
padding computes to 0.


PS - don’t forget to add the -webkit- prefixed properties / values for Safari.


Philippe
--
Philippe Wittenbergh
http://l-c-n.com/





__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Flex items lose some padding in Firefox

[David Hucklesby]

Just learning flexbox, so I am likely doing it wrong.

This is the bare bones of a grid of thumbnails. Works okay in Opera and Chrome,
but the top and bottom padding disappear in Firefox:

 

FWIW this does not happen in a float or inline-block layout.

Any clues gratefully received. Thanks.
--
Cordially,
David
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] MQ syntax

[Tom Livingston]

List,

Drawing a blank on this. Is this correct syntax for this MQ?

@media only screen and (min-width: 600px) and
(-webkit-min-device-pixel-ratio: 1.5), (min-width: 600px) and
(min-resolution: 144dpi){ rules here }

I'm using this in picturefill (ver 1.x) and I think it's causing an
error and need another pair of eyes. Picturefill use is:




Thanks

-- 

Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/