869 private links
Each element can be styled with multiple box shadows. By programmatically controlling the positions and sizes of each individual box shadow, it's possible to make up a something like a pixel display.
In this article Josh Comeau went in depth on why it matters to think of CSS as the parameter to the layout algorithms. This means for any layout problem, you must think of which layout algorithm you're using before deciding.
For example, z-index is not functioning by default. To use it you must set position: relative | relative. This is because the flow algorithm (think about Word) doesn't know about z-index. It only makes sense in the "Positioned" layout algorithm. And the position attribute is used to switch the positioned algorithm. Instead of saying z-index depends on the position attribute, it's better understood that it depends on the layout algorithm.
Another evidence is that properties are interpreted differently in different layouts. For example, width is hard-restriction for flow layout, but more fluid in a flexbox layout.
It's possible to declare conflicting layouts on the same element. But then there is a priority in which algorithm takes precedence. Two algorithms are never used simultaneously on the same element.
Identifying the algorithm:
- flow (the default)
- the core of flow layout are inline blocks and blocks.
- positioned (when
positionis set), four variants: relative, absolute, fixed, sticky - float (when
floatis set) - table
- flexbox (parent is
display: flex) - grid (parent is
display: grid)
There are quirks which are result of different layout algorithms. For example, when putting an img inside a box, it gets a little whitespace below it that are not padding/margin/border of either parent box or the image. This is because inline elements are aligned by baseline. And the flow algorithm adds a bit of vertical space below the baseline of inline element to ensure the bottom part of "g", "j", etc are visible. img by default is inline-block and its baseline is at its bottom edge (0). Now the problem is understood one can solve it in different ways.
Josh Comeau writes one of the best interactive css tutorial out there! I learned so much in this article. A few notes:
margin: automakes the child take as much margin as possible.width: fit-contentuses all available space, but within the intrinsic sizemargin-inline: autois a shorthand formargin-left: auto; margin-right auto;place-content: centeris a shorthand foralign-content: center; justify-content: center- difference between
place-contentandplace-itemsin grid layout - the latter aligns items relative to the cell - the insight that css attributes are merely inputs to the underlying layout algorithm
How do you make a webpage without any source code?
- Return "Content-Type: text/html" with empty content. This is tantamount to a bare webpage "<html><body></></>"
- Fill the page's content with the "::before/after{content: xxx}" CSS
- Place the inlined stylesheet in the link header
I learned it's possible to inject CSS via HTTP header: https://danq.me/2020/12/21/http-link-css-injection/
This article explained the concept pretty well! It not only showed how to use Flexbox, but also the reason it's designed this way. Here are a few things I learned:
- the default css layout algorithm is flow. flexbox and grid are two completely different layout. by using
display: flexwe are switching layout algorithm. justifymeans to position along primary axis, whereasalignmeans to position along cross axis (think of a kebab skew vs cocktail wiener)contentis a group of things that can be distributed, whereasitemsrefers to single items that are positioned individually.widthin flow layout is a hard constraint, whereas in flexbox layout it's a "hypothetical size", meaning only the hinted size.flex-basisis just like thewidth(orheight) attribute along the primary axis. A difference is thatflex-basiscannot reduce an item below its minimum size.flex-grow: nto use the remaining n_i/(sum n_i) of space; specially,flex-grow: 0stick to its intrinsic size.flex-growis used when the children's size combined is smaller than the size of container, whereasflex-shrinkis used when children's size is bigger.flex-shrink: nshrinks the children by making each pay the debt in size. each pays a portion of (n_i/sum n_i); speciallyflex-shrink: 0makes the child never shrink.- flexbox layout never shrinks an item below its
min-width(or height), regardless of theirflex-shrinkvalue, and even at the cost of overflowing the container. gapis a convenient attribute comparing to settingmarginbecause it doesn't add spacing on the ends.margin: autois an useful alternative toflex-grow: 1because it gobbles up the spare space without changing the item's size.- with
flex-wrap: wrap, items won't shrink below their hypothetical size, and overflowed items wrap to a new row/column. - when
flex-wrap: wraptakes effect, we usealign-contentto adjust the position of all items about the cross-axis.
How does Photoshop's layer blending mode (or CSS mix-blend-mode) work? This article greatly illustrated with examples and the exact formulas.