Re: [css-d] media queries following prior rules

[Philippe Wittenbergh]

> On Jul 12, 2016, at 12:28 PM, Tom Livingston  wrote:
> 
> On Monday, July 11, 2016, Philippe Wittenbergh  wrote:
> 
>> How did Peter Gabriel creep into the conversation?
> 
> 
> He sang the song "Sledgehammer" ;)

Ah. Thanks. I learned something today! Last time I listen to that type of music 
must have been 20years ago or so…


last 2 hours playlist: Peter Brötzmann - Münster Bern, followed by Kuwayama 
Kiyoharu & Masatoshi Urabe - From the abolition port

Studies in contrasting reflections


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] media queries following prior rules

[Tom Livingston]

On Monday, July 11, 2016, Philippe Wittenbergh  wrote:

>
> > On Jul 12, 2016, at 9:44 AM, Tom Livingston  > wrote:
> >
> > While Philippe may well me right about Peter Gabriel singing the theme
> song
> > for this technique, I have used this method frequently, with a slight
> > difference. I use:
> >
> > html{box-sizing: border-box;}
> > *, *:before, *:after { box-sizing: inherit; }
> >
> > Possibly picked it up from here:
> >
> https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
> >
> > Though I can't put my finger on it right now, I have read where this
> method
> > isn't really as a performance hit as it may seem.
>
> It is not really the performance “hit” that I object to (modern browsers
> can handle the universal selector perfectly fine, even in deeply nested
> trees – still use in moderation…), it is the “inherit” value.
>
> (and I never have had the need to use such a construct myself… my aversion
> to so-called ‘reset’ css thingies is well-known on this list)
>
> How did Peter Gabriel creep into the conversation?


He sang the song "Sledgehammer" ;)



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

-- 

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/

Re: [css-d] media queries following prior rules

[Philippe Wittenbergh]

> On Jul 12, 2016, at 9:44 AM, Tom Livingston  wrote:
> 
> While Philippe may well me right about Peter Gabriel singing the theme song
> for this technique, I have used this method frequently, with a slight
> difference. I use:
> 
> html{box-sizing: border-box;}
> *, *:before, *:after { box-sizing: inherit; }
> 
> Possibly picked it up from here:
> https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
> 
> Though I can't put my finger on it right now, I have read where this method
> isn't really as a performance hit as it may seem.

It is not really the performance “hit” that I object to (modern browsers can 
handle the universal selector perfectly fine, even in deeply nested trees – 
still use in moderation…), it is the “inherit” value.

(and I never have had the need to use such a construct myself… my aversion to 
so-called ‘reset’ css thingies is well-known on this list)

How did Peter Gabriel creep into the conversation?

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] media queries following prior rules

[Tom Livingston]

On Mon, Jul 11, 2016 at 7:58 PM, Philippe Wittenbergh 
wrote:

>
> > On Jul 12, 2016, at 1:13 AM, John J  wrote:
> >
> > At the link below, the name, email, subject fields don't appear to be
> > obeying rules governing width as in the previous media breaks..
> >
> > at 360 and 320, those fields exceed the width of  their parent, rather
> than
> > respecting padding set prior..maybe I'm missing something..if I have my
> > rules set up correctly, the css should behave a certain way until told
> > differently in the next media query, right?
> >
> > Thank you for any insight about this!
> >
> > John
> >
> > http://john-a-johnson.com/contact.php
>
> As suggested by Peter, the box-sizing rules are messing things up (big
> time).
>
> You have, on line 6 of style.css
> *, *:before, *:after { box-sizing: inherit; }
>
> That is a sledgehammer – and incredibly damaging – approach to a
> non-existent problem. Remove that rule and only override the default
> box-sizing in a case by case approach.
>
> Philippe
> --



While Philippe may well me right about Peter Gabriel singing the theme song
for this technique, I have used this method frequently, with a slight
difference. I use:

html{box-sizing: border-box;}
*, *:before, *:after { box-sizing: inherit; }

Possibly picked it up from here:
https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/

Though I can't put my finger on it right now, I have read where this method
isn't really as a performance hit as it may seem.

-- 

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/

Re: [css-d] media queries following prior rules

[Philippe Wittenbergh]

> On Jul 12, 2016, at 1:13 AM, John J  wrote:
> 
> At the link below, the name, email, subject fields don't appear to be
> obeying rules governing width as in the previous media breaks..
> 
> at 360 and 320, those fields exceed the width of  their parent, rather than
> respecting padding set prior..maybe I'm missing something..if I have my
> rules set up correctly, the css should behave a certain way until told
> differently in the next media query, right?
> 
> Thank you for any insight about this!
> 
> John
> 
> http://john-a-johnson.com/contact.php

As suggested by Peter, the box-sizing rules are messing things up (big time).

You have, on line 6 of style.css
*, *:before, *:after { box-sizing: inherit; }

That is a sledgehammer – and incredibly damaging – approach to a non-existent 
problem. Remove that rule and only override the default box-sizing in a case by 
case approach.

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] media queries following prior rules

[Peter H.]

> On 11 Jul 2016, at 18:13, John J  wrote:
> 
> At the link below, the name, email, subject fields don't appear to be
> obeying rules governing width as in the previous media breaks..
> 
> at 360 and 320, those fields exceed the width of  their parent, rather than
> respecting padding set prior..maybe I'm missing something..if I have my
> rules set up correctly, the css should behave a certain way until told
> differently in the next media query, right?
> 
> Thank you for any insight about this!
> 
> John


John, I think it's your box-sizing rule. For some reason it's specified as 
'inherit' in the reset. If you change that to 'border-box' your layout may work 
as intended.  Peter
__
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/