This way the text will wrap above the shape even though the div extends to the top.

shape-outside: inset(100px 100px 100px 100px 10px);

It might be better to think of it this way: with the shape-outside property we’re changing the relationship of other elements around an element, not the geometry of the element itself.

Now that we’ve gotten newer layout features — again, like grid and flexbox — floats, too, have sort of fallen by the wayside, perhaps either because there are better ways to accomplish what they do

vertical-align: -50%;

Last week, I shared how to check if an input is empty with CSS. Today, let’s talk about the same thing, but with JavaScript.

The :empty selector refers only to child nodes, not input values. [value=""] does work; but only for the initial state. This is because a node's value attribute (that CSS sees), is not the same as the node's value property (Changed by the user or DOM javascript, and submitted as form data).

You can use the :placeholder-shown pseudo class. Technically a placeholder is required, but you can use a space instead.

Generally, CSS selectors refer to markup or, in some cases, to element properties as set with scripting (client-side JavaScript), rather than user actions. For example, :empty matches element with empty content in markup; all input elements are unavoidably empty in this sense. The selector [value=""] tests whether the element has the value attribute in markup and has the empty string as its value. And :checked and :indeterminate are similar things. They are not affected by actual user input.

The selector [value=""] tests whether the element has the value attribute in markup and has the empty string as its value.

it does require some CSS trickery to get everything just right

You can’t use @supports for selectors, only property/values (e.g. @supports (display: flex))

You can do and impressive amount of form validation with just HTML attributes. You can make the user experience pretty clean and clear with CSS selectors.

the client form validation is the one I like a lot, because, for example, by adding required attribute to an input, I don’t need to write any additional JavaScript to warn a user, when the user submits a form without filling out the required fields

There are numerous user interface state pseudo-classes. You’ve probably already known :hover, :active etc. According to this W3C Candidate Doc, there are additional pseudo-classes defined, such as :valid, invalid, in-range, out-of-range, required, optional, read-only and read-write.

label:after { content: attr(data-invalid); ... }

:placeholder-shown

The transform property allows you to visually manipulate an element by skewing, rotating, translating, or scaling: .element { width: 20px; height: 20px; transform: scale(20); } Even with a declared height and width, this element will now be scaled to twenty times its original size:

100vw is 100% of the viewport width not accounting for scrollbars (unless the root element has anything other than overflow: auto set, but auto is the default value). Thus, when the page content overflows the viewport vertically, the browser renders the vertical scroll bar, which reduces the visible viewport area by a few pixels. But the 100vw value doesn't update to account for this, so the selected div retains the same width as before the vertical scrollbar appeared. This results in the horizontal scroll bar rendering.

Now, however, you set width:100vw and that is going to be (in this case) 100% wide (viewport wide) + the vertical scrollbar width. That’s too wide. That induces the HORIZONTAL scrollbar.

You use grid-area, so the place for the side nav is allocated at start. If you hide (or even delete) the side nav, that won't change anything about this. You have to do a little trick: Set the width for the first column to 0 and change the grid-gap because otherwise you will have a (not needed) gap at the left.

Adding backgrounds and borders does feel like a missing feature of the CSS Grid specification and one which the Working Group have discussed along with many members of the community (the discussion thread is on GitHub).

With Grid and generated content, we can add a line either side of our heading without adding any additional markup. The line will grow and shrink according to available space

The key phrase here is “children of a grid container.” The specification defines the creation of a grid on the parent element, which child items can be positioned into. It doesn’t define any styling of that grid, not even going as far as to implement something like the column-rule property we have in Multi-column Layout. We style the child items, and not the grid itself, which leaves us needing to have an element of some sort to apply that style to.

Ensure that there can only be four items per row: grid-template-columns: repeat(auto-fill, minmax(20%, 1fr)); grid-gap: 10px; With 20% minimum width per item, and a grid gap (of any length), there can never be more than four items per row.

Because of the way the CSS “or” operator works, I wouldn’t be able to mix the retina conditions with other expressions since a (b or c) would be compiled into (a or b) c and not a b or a c.

auto (i.e. minmax(auto, max-content))

Note: auto track sizes (and only auto track sizes) can be stretched by the align-content and justify-content properties.

Is a keyword that is identical to maximal content if it's a maximum. As a minimum it represents the largest minimum size (as specified by min-width/min-height) of the grid items occupying the grid track.

If no end line value is declared, the item will span 1 track by default.

Notice that you’re not naming lines with this syntax, just areas.

The syntax itself provides a visualization of the structure of the grid.

justify-content Sometimes the total size of your grid might be less than the size of its grid container. This could happen if all of your grid items are sized with non-flexible units like px. In this case you can set the alignment of the grid within the grid container.

this issue is rather about styling the the cells and areas

This idea is not new, there are reference books which teach the use of grid layout, I haven't seen a single book that doesn't show a grid overlay as part of the process.

the author should be able to style area boxes

#grid::grid-area(1 / 2 / 3 / 4) { background-color: red;

When you generate before- and after-content pseudo-elements, Grid treats them as actual elements and makes them grid items.

Since CSS doesn’t (yet) offer a way to style grid cells, areas, or tracks directly, we have to stretch elements over the parts we want to style independently from the elements that contain content.

div:nth-of-type(3n+1) { grid-column: 1; } div:nth-of-type(3n+2) { grid-column: 2; } div:nth-of-type(3n+3) { grid-column: 3; } div:nth-of-type(-n+3) { grid-row: 1; }

The 1 / -1 means “go from the first grid line to the last grid line of the explicit grid”, regardless of how many grid lines there might be. It’s a handy pattern to use in any situation where you have a grid item meant to stretch from edge to edge of a grid.

They likely won’t have any content, making them a sort of structural filler to spackle over the gaps in Grid’s capabilities.

Just like in flexbox, this will move the displayed grid items out of source order, placing them after the grid items that don’t have explicit order values.

#ttt > * { border: 1px solid black; border-width: 0 1px 1px 0; display: flex; /* flex styling to center content in divs */ align-items: center; justify-content: center; } #ttt > *:nth-of-type(3n) { border-right-width: 0; } #ttt > *:nth-of-type(n+7) { border-bottom-width: 0; }

This nav bar by Chris Coyier is a great example of something that makes more sense as a flexbox than grid.

Flexbox and grid play well together, and are a huge step forward from the float & table hacks they replace.

Flexbox's strength is in its content-driven model. It doesn't need to know the content up-front. You can distribute items based on their content, allow boxes to wrap which is really handy for responsive design, you can even control the distribution of negative space separately to positive space.

Flexbox: content dictates layout

Grid: container dictates layout

Flexbox is for one dimensional layout (row or column). CSS grid is for two dimensional layout.

Your grid areas can only be rectangles (like the left), not arbitrary polygons (like the right).

.box1 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; } .box2 { grid-column-start: 1; grid-row-start: 2; grid-row-end: 4; }

the difference is exactly like block and inline-block ... if you use inline-grid with sibling elements they will be placed in the same line unlike grid ... so here you change to grid also since each element is inside a grid area alone

Sass

Use inline styles for everything.

Bordering an element with a single repeating image is something that seems like it should be easy with a property called border-image, but the process for actually doing that is somewhat counter-intuitive. Let’s say, for example, that you want to border an element with a repeating heart icon. You can’t do that with a image of a single heart. Instead, you have to make an image of a “frame” of hearts arranged as you’d like them to appear in the border, then slice that image. <img sizes="(min-width: 735px) 864px, 96vw" src='https://i2.wp.com/css-tricks.com/wp-content/uploads/2013/01/enlarged-border-image-slice.png' alt='' data-recalc-dims="1" />Eight hearts in a “frame” image, enlarged to show detail. The red lines indicate slices. If you think that sounds preposterous, you’re in good company. There was a lengthy discussion of the subject on Eric Myer’s blog a few years ago where many frontend development greats weighed in.

The background-origin CSS property sets the background's origin: from the border start, inside the border, or inside the padding.

border-image-slice

You could use an asymmetrical border to make curves with CSS. border-radius: 50%/100px 100px 0 0;

Situation: you have a single line of text in a flex child element. You don’t want that text to wrap, you want it truncated with ellipsis (or fall back to just hiding the overflow). But the worst happens. The unthinkable! The layout breaks and forces the entire flex parent element too wide. Flexbox is supposed to be helping make layout easier!

I used it to create a full-bleed utility class: .full-bleed { width: 100vw; margin-left: calc(50% - 50vw); }

Use-case party I asked some CSS developers when they last used calc() so we could have a nice taste here for for how others use it in their day-to-day work.

Great, I can use vw to scale text so it doesn't look puny on a desktop! Perfect... Oh. Huh, now the text is too small to read when viewed on a phone. Okay, well I can just use "max(x,y)" to make sure it doesn't get shrunk beyond a minimum size. Perfect... Oh. Hmm. Looks like "max" isn't supported properly by Chrome. Okay, well guess I'll just use "px" again.

auto As a maximum, identical to max-content. As a minimum it represents the largest minimum size (as specified by min-width/min-height) of the grid items occupying the grid track.

CSS Grid Layout excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.

This is really cool! Having the content decide on the space it needs is so powerful!

How to wrap long word (text without spaces) in html table’s cell? This is very, very easy! We must add only a CSS proprty to table cell “td” tag – “word-break: break-all;” then all column’s widths become as intended. 

fixed: With this value, the table’s layout ignores the content and instead uses the table’s width, any specified width of columns, and border and cell spacing values. The column values used are based on widths defined on columns or cells for the first row of the table

It is also very likely that the contents of the table might change the structure or dimensions of the table. For example, long words residing in the table cells can cause the cell width to increases. If you fix that problem, it might happen that the long words cross the cell boundaries.

The only difference is that in this case “auto” will not work, but instead “height: 100%” is required.

Blocks Don’t Need 100% Width When we understand the difference between block-level elements and inline elements, we’ll know that a block element (such as a <div>, <p>, or <ul>, to name a few) will, by default expand to fit the width of its containing, or parent, element (minus any margins it has or padding its parent has).

But in most cases, I strongly recommend you use padding inside a box, rather than margins, to ensure you don’t have this problem.

It seems like this should be one of the easiest things to understand in CSS. If you want a block-level element to fill any remaining space inside of its parent, then it’s simple — just add width: 100% in your CSS declaration for that element, and your problem is solved. Not so fast. It’s not quite that easy. I’m sure CSS developers of all skill levels have attempted something similar to what I’ve just described, with bizarre results ultimately leading to head scratching and shruggingly resorting to experimenting with absolute widths until we find just the right fit. This is just one of those things in CSS that seems easy to understand (and really, it should be), but it’s sometimes not — because of the way that percentages work in CSS.

min-width: 0;

The explanation here is that the minimum size of an fr unit is auto. Grid then looks at the min-content size of the item. If the item has a size (you’ve given it a width) or has something in it with a size such as an image, the min-content size might be much bigger than the share of available space you think 1fr will give you. It’s easy to think of 1fr as being “one part of the space in the grid container” when it is really one part of the space left over. If there is space to grow then the tracks grow from that min-content size assigning space. Using minmax, as you have pointed out, is the best thing to do if you want to forcibly have equal width tracks, as that says “I want this track to have a min-content size of 0”, you could potentially in that situation end up with overflows as you lose the squishiness.

It’s easy to think of 1fr as being “one part of the space in the grid container” when it is really one part of the space left over.

And since auto is entirely based on content, we can say it is “indefinitely” sized, its dimensions flex. If we were to put an explicit width on the column, like 50% or 400px, then we would say it is “definitely” sized.

It’s true that the auto value would do the same, but auto isn’t quite as robust since it’s size is based on the content inside.

Making literal grids. Like X columns with Y gap between them homegrown framework stuff. grid-gap is wonderful, as gutters are the main pain point of grid systems.

I think you’re missing the spirit behind the classic “centering is hard” complaint in a couple of places, which, at least for me, always comes back to not knowing the height of the elements.

I figured I could try making my own with modern technologies.

The CSS Zen Garden era was hugely inspirational to many.

But Svelte doesn't work like that - all css is statically compiled, and changing myCSS doesn't update the head component.

// super-simple CSS Object to string serializer const css = obj => Object.entries(obj || {}) .map(x => x.join(":")) .join(";");

You can read more about properly sizing the text using a combination of units along with the the calc() function in this excellent article about viewport unit-based typography.

While there are always going to be cases where one is more appropriate than the other, border-bottom offers much more precise control over text-decoration and is therefore probably the preferred method. Here's a quick (likely not exhaustive) list of properties that border-bottom can control/enable that text-decoration cannot:

<q>Dies ist ein deutsches Zitat</q>

@Alex Yes, you can. In the same manner that you do so with non-flex grids, apply a negative margin-left to the grid wrapper, and apply that same value as padding left to all grid columns. .grid { margin-left: -20px;} .grid__col { padding-left: 20px;}

If there’s a lot more to aligning icons to text than you expected, then you are not alone.

visually-hidden is a class used to visually hide the label text with CSS:

I'm thinking of creating something similar to a utility-first CSS framework like Tailwind, here's how it could look like:StyledText( style: [selfAlignRight, padding(8), fontSize(20), fontBold], text: 'hello' )

CSS Object Model (CSSOM)

let root = document.documentElement; root.addEventListener("mousemove", e => { root.style.setProperty('--mouse-x', e.clientX + "px"); root.style.setProperty('--mouse-y', e.clientY + "px"); });

Here’s a CSS variable (formally called a “CSS custom property“)

An additional benefit is semantic identifiers. For example, --main-text-color is easier to understand than #00ff00, especially if this same color is also used in other contexts.

A great thing about CSS variables is their reactive nature. As soon as we update them, whatever property has the value of the CSS variable gets updated as well.

The standard cascade rules also apply to the CSS Variables.So, if a custom property is declared multiple times, the lowermost definition in the css file overwrites the ones above it.

@import url() is a runtime CSS statement, not a Sass @import module.

text-overflow: ellipsis (married with fixed width and overflow: hidden

If the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the mdc-form-field--nowrap class:

iron-list must either be explicitly sized, or delegate scrolling to an explicitly sized parent. By "explicitly sized", we mean it either has an explicit CSS height property set via a class or inline style, or else is sized by other layout means (e.g. the flex or fit classes).

In addition, this example shows usage of the isPressed value returned by useButton to properly style the button's active state. You could use the CSS :active pseudo class for this, but isPressed properly handles when the user drags their pointer off of the button, along with keyboard support and better touch screen support.