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

[David Hucklesby]

On 5/3/15 7:49 PM, Philippe Wittenbergh wrote:



Le 4 mai 2015 à 03:21, David Hucklesby  a écrit :


What issue (and which old Android) are you seeing? And, you lock out IE
10/11 as well?




I’m looking at canIuse, which notes that Android 4.2−4.3 don’t support
flex-wrap.


But is that always true? I have here an older Sony Xperia phone - very
popular here in Jpn that appears to support flex-wrap (OK, via the shorthand
- `flex-flow: row wrap;`) just fine. According to my son, who got the device
for free and set it up (have to leave all those complicated things to the
younger generation…), it runs the default system + browser (and that thing
can’t seem to access the G.playstore and even less the Docomo system server).
Thing is old enough not to run Android 4.4.



Good news. Thank you. (Sadly, my only mobile device is an iPad.)

P.S. Tell Mr Abe - No Nukes! ;)
--
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/

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

[Philippe Wittenbergh]

> Le 4 mai 2015 à 03:21, David Hucklesby  a écrit :
> 
>> What issue (and which old Android) are you seeing? And, you lock out IE 10/11
>> as well?
> 
> 
> 
> I’m looking at canIuse, which notes that Android 4.2−4.3 don’t support
> flex-wrap.

But is that always true? I have here an older Sony Xperia phone - very popular 
here in Jpn that appears to support flex-wrap (OK, via the shorthand - 
`flex-flow: row wrap;`) just fine. According to my son, who got the device for 
free and set it up (have to leave all those complicated things to the younger 
generation…), it runs the default system + browser (and that thing can’t seem 
to access the G.playstore and even less the Docomo system server). Thing is old 
enough not to run Android 4.4.

> But I don’t see that as an issue, as I use inline-blocks as a base
> (with alignment impossible with floats). But, unless I minimize the HTML, none
> of the usual hacks for getting rid of extra gaps seem to work reliably
> cross-browser. Hence my interest in using flex-box. :)

Right, flexbox is pretty good for that kind of things, and more human readable 
than the next layout thing some people are excited about (grid layout). And 
support is good enough across the board to use it extensively (IE8 is the big 
head-ache nowadays).

PS - working with inline-block for that grid layout you use in this thread:
.wrap { font-size: 0rem; font-family: monospace }
.wrap > .kid { display: inline-block; font-size: 1rem /*to taste*/; 
font-family: /*whatever*/, sans-serif; box-sizing: border-box; width: xxx%; 
vertical-align: top; }

works pretty well for me. Need a bit of hacking for IE 8 though.

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] Modernizer and older browser (IE)

[Tom Livingston]

On Sunday, May 3, 2015, Crest Christopher 
wrote:

> When using Modernizer for older browsers, in most of my cases IE7 & 8. Do
> I strictly place the same rules that I've placed for newer browsers for
> older versions of IE style sheet, then let Modernizer do what it does best ?
>
> Christopher
>
>
> Modernizr doesn't make old browsers render like new browsers. It gives you
ways to create styles for less capable browsers - among other things. If
you inspect your page with modernizr added, you will see a bunch of classes
added to the html element. Use those as hooks in your CSS to write rules
for each situation where a browser lacks support (or the opposite). For
example, if you have rules for transitions that don't work in a browser
that doesn't support transitions, then Modernizr would add a class of
no-transitions (for example. Read docs or inspect the page for actual class
names) so you can write fallback styles for that browser.

.mydiv{transition styles}

.no-transition .mydiv{fallback styles}





-- 

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/

[css-d] Modernizer and older browser (IE)

[Crest Christopher]

When using Modernizer for older browsers, in most of my cases IE7 & 8. 
Do I strictly place the same rules that I've placed for newer browsers 
for older versions of IE style sheet, then let Modernizer do what it 
does best ?


Christopher

__
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

[David Hucklesby]

On 5/2/15 10:18 PM, Philippe Wittenbergh wrote:



Le 3 mai 2015 à 01:02, David Hucklesby  a écrit :

Ah, yes. Did not know about that. Confused by the fact Chrome *does* apply
 the padding.


Yes, Chrome / Blink  (and Webkit) is not spec compliant for this (and many
other things flexbox related). They unprefixed the flexbox code when they
forked from Webkit) in a fit of holier-than-thou mentality.



Some developers can be quite arrogant, sadly.



Actually am applying this on top of inline-blocks via @supports (
flex-wrap: wrap ) to prevent old Android versions using it. So Safari is
locked out anyway.


What issue (and which old Android) are you seeing? And, you lock out IE 10/11
as well?


 

I’m looking at canIuse, which notes that Android 4.2−4.3 don’t support
flex-wrap. But I don’t see that as an issue, as I use inline-blocks as a base
(with alignment impossible with floats). But, unless I minimize the HTML, none
of the usual hacks for getting rid of extra gaps seem to work reliably
cross-browser. Hence my interest in using flex-box. :)

BTW: Flex box lets me put fixed padding on the blocks - something that breaks
other solutions. So - problem solved!

Thanks for the feedback.

--
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/