« first day (1723 days earlier)      last day (2065 days later) » 

00:04
If I don't set the left value of a fixed element, will the left always be as if it were static (going inside the parent)? And if so, why doesn't 100% width just make it the width of the parent?
 
5 hours later…
05:18
@Alesana If you don't specify a left property value of a fixed element its computed position will appear to be "static" (this is the case for any absolutely positioned element). Refer to the following demonstration: jsfiddle.net/pL7owctc - notice how the element is positioned fixed but not horizontally offset to left edge of the containing block (even though it is fixed), if you declare a left property value then the expected behaviour will be observed.
@Alesana Since it is *taken out of the normal document flow* when *absolutely positioned* declaring a `width` property value of `100%` will attribute it the full width of the containing block (parent element) *including* any *offset* attributed by `left`, `right` or `margin` attributes.
Consider specifying both a `left` and `right` property values of `0` (leaving the `width` value `auto`) to have *absolutely positioned* elements fill the full available horizontal space of the containing block, e.g: https://jsfiddle.net/pL7owctc/1/
Read the first sentence above as "Since it is *taken out of the normal document flow*, (comma) when *absolutely positioned*, (another comma) declaring a `width`... (continue)"
Punctuation is key :) For some reason the markdown formatting broke as well...
05:46
That is weird about the formatting :P
I was seeing that the left property of a fixed element, when left unspecified, appeared static, but I wasn't sure if this was documented somewhere or if it was just how the browsers decided to do it (hence it might not be the same on all browsers or it might change)
What is the difference between left:0; right:0; width:auto; and left:0; width:100%;?
Anyways, the only confusion is that since it is taking it out of the normal document flow, why does it stay in the same place. It just seemed inconsistent that there would not be a way to try to size it as if it were statically positioned, but there is a way to position it as if it were statically positioned
@Alesana The system has had enough of these formatting shenanigans of mine :D
I couldn't find a documented case, but I haven't checked the Specification (I know, of all places...)
The only difference there (between `left:0; right:0; width:auto;` and `left:0; width:100%;`) is that if you include any additional offset (like, say, a `margin-left` property value), the width will not account for it, it will remain at `100%` of the containing block instead of *reducing* in width to remain within the width of the containing block. If you refer back to the 2nd fiddle I linked to and declare a `marg
Ahh I see what you're saying
 
2 hours later…
08:08
@TylerH Thank you for your feedback. This is not my code. This is just a code I used for inspiration for the layout. The thing is that of course I know that "+" implies next sibling but in this example it's the focus that confuses me. The style has been applied on "label". The "focus" though has only been applied in the .text. How is it possible taken the example as it is for the label to trigger if I focus on it.
@TylerH This is what I don't get. (btw I am not trying to achieve something different - this is the outcome that I want. I am just trying to understand why "focus" works on both .text and .label triggering the animation while it has been only applied on text)
@TylerH In other words .. as you can see .label is overlapping .text. But even if I click on .label it's still triggering the .label animation while a "focus" condition has only been applied on .text
08:27
Is this a good example of when to use width:auto? jsfiddle.net/4qpgse5u/1 width:auto always scares me as the word auto suggests it's out of my control :)
@MyDaftQuestions You may want to change the box model instead
@MyDaftQuestions developer.mozilla.org/en-US/docs/Web/CSS/box-sizing — the default is content-box, using border-box instead is probably what you want and instead of auto you can still use 100%
09:25
Thank you @AlexisWilke
@AlexisWilke, actually, this is brilliant... The content-box is perfect!
Are there any HTML/CSS podcasts any one can recommend?
posted on January 16, 2018

New Cyanide and Happiness Comic

10:31
Hi all, Can any one give me some advice on the JQuery-ui.js please
10:46
don't ask questions about questions. just ask questions
 
5 hours later…
15:26
@Mdermez that's the intended behavior of a label element
when a label is assigned to a form element (either by putting the element inside the label or by using the for attribute), it is called an associated label
associated labels take whatever click events are captured by their associated elements
@TylerH There are some style guides that restrict you to class selectors and pseudos
They are as idiotic as they sound
@BoltClock care to gut check what I just said?
about labels
That's correct
okay, I couldn't remember
Wait, click events? I dunno
15:31
er, not click events
well, yeah
click or focus
But yes clicking a label focuses its control. Hovering a label also triggers :hover on its control
Took quite a bit of time for browsers to catch on the latter
I don't build forms these days so I forget how they work
@Alesana Because the containing block of a fixed element is always the viewport, never its parent element
except when calculating the static position (which, since you asked, is in w3.org/TR/CSS22/visudet.html#abs-non-replaced-width), when it's the initial containing block, which is not the same thing as the viewport
6
A: Difference between initial containing block and viewport

BoltClockThe initial containing block and the viewport, while related to each other, are two distinct concepts. The viewport generally refers to the viewable area of a browser window in which a page is rendered on screen. The initial containing block is the logical area within the page in which the root ...

@Alesana For absposed elements, there is none. Both of these satisfy the equation (in the spec I linked above) the same way oh, yeah, margins. Derp
15:49
it's even more fun when you have position:fixed inside position:fixed
Now declare a transform property on the containing element and you'll be amused for hours, possibly days.
I solved that at my company by including a firewall rule to parse any .css or .js file for the keyword transform and block it
16:06
@BoltClock ... except when the parent element has a transform (what @UncaughtTypeError said) or will-change: transform
will-change
the rudest property
Damn, now we'll have to declare our dirty transform properties in .php files...
<?php header('Content-Type: text/css'); ?>
16:44
@TylerH I can only surmise the user with more answers than Jon Skeet is Gordon Linoff
ok nvm someone replied to you. (What happened to the comment section of the blog?)
@BoltClock yeah
@BoltClock I thought it was my adblocking
they really messed it up/uglified it
but then again they are wanting to move away from the blog toward meta posts anyway so
It looks very much like the default WordPress comment layout
It was Disqus before, not sure what happened to that
Even youtube's comment system seems better (and that's not great either, if you consider it a social networking site)
16:59
WordPress's is just a relic, that's what it is
Well done to Jon Skeet though, the man, the legend. *It's over... 1,000,000!*
*Edit: exclamation mark added for emphasis*
Works well enough for small sites. Remember guestbooks?
Looks like I broke the markdown formatting again...
@BoltClock Nope. Can't say that I do... let me google that quick...
Markdown doesn't work on multiline messages
What? Really? Wow... well okay...
17:02
@UncaughtTypeError If you're not getting relevant results, cgi is another keyword to use
(Yes, that old)
17:46
posted on January 17, 2018 by CommitStrip

 
3 hours later…
20:50
@BoltClock Thank you! Now I feel much more comfortable assuming that it is going to stay there :B

« first day (1723 days earlier)      last day (2065 days later) »