Jessica Lyschik

WCEU talk: How Subgrid enhances CSS Grid
Better late than never, I’ve finally managed to bring this blog post together! I also took time and changed the theme on this website, so that might have been one reason it took a few more days than expected.

I’ve also created a new Speaking page and added all my English talks so far there. You can find an embedded video and a link to my slides on the speaking page as well.

Or watch the recording of my session right here:

Click here to display content from WordPress.tv.
Learn more in WordPress.tv’s privacy policy.

Always display content from WordPress.tv

Open "VideoPress Video Player" directly

Resources list

As I promised in my talk, I’ve collected various resources regarding Subgrid. If you want to see more examples and dig a bit deeper, here’s what you should check out:
- caniuse.com – shows the current state of the Subgrid implementation across browsers
- MDN Docs – detailed documentation
- Codrops: Subgrid – another detailed resource with various examples
- dev.to: Ken Bellows Subgrid article
- envatotuts+: CSS Subgrid: Features, Syntax and the problem it will solve
- Smashing Magazine: CSS Grid Level 2 – Here Comes Subgrid by Rachel Andrew
- YouTube: Mozilla Developer – Don’t wait to use Subgrid for better card layouts by Miri Suzanne
- YouTube: Mozilla Developer – Laying out forms using Subgrid – by Miri Suzanne
- YouTube: Hello Subgrid – Talk by Rachel Andrew at the CSSconf EU 2019 (Caution: video starts with loud audio, lower the volume)
- Irregular shaped links with Subgrid – yet another great example how Subgrid could enhance the styling of elements, by Michelle of CSS IRL
Chrome & Safari bugtrackers

As mentioned in my talk, Chrome and Safari have open bug tickets in their trackers to implement Subgrid. Check out these if you want to participate:
- Webkit (Safari)
- Chromium (Chrome)
Jessica

June 24, 2020

Speaking
TIL: Smooth scroll behaviour with CSS
I was aware that the scrolling behaviour of browsers can be adjusted with JavaScript. Today I learned that it’s also possible to do with CSS:
```
.container {
    scroll-behaviour: smooth;
}
```
Sadly it’s not available in all browsers, Internet Explorer, Safari and Opera do not support it.

Check out the CSS Tricks article about the scroll-behaviour property.
Jessica

December 6, 2019

Today I learned
TIL: Changes tab in Firefox DevTools

At the Smashing Conf SF 2019, Jen Simmons walked through creating a layout with CSS Grid almost completely from scratch.

Showing the Firefox DevTools, she showed the Changes tab, which basically collects all changes made in the DevTools until you refresh the page.

Link to the video and timestamp: https://vimeo.com/331578108#t=526s

Be sure to watch the entire video as well, as Jen explains a lot of how she creates the layout along the way.

Jessica

November 12, 2019

Today I learned
TIL: How to monospace numbers in fonts
I stumbled upon a CSS property I wasn’t aware of: font-feature-settings.

Ever had the “joy” of using a non-monospace font and working with numbers in a table? Or any other occassion where the different width of each number just didn’t look great? Then you have to check out this CSS:
```
font-feature-settings: "tnum";
```
With tnum, the browser will handle the numbers as monospace figures.

Check out the MDN web docs for more information and other possible values. All modern and even older browsers support this, see caniuse.com.
Jessica

October 25, 2019

Today I learned

WCEU talk: How Subgrid enhances CSS Grid

Resources list

Chrome & Safari bugtrackers

TIL: Smooth scroll behaviour with CSS

TIL: Changes tab in Firefox DevTools

TIL: How to monospace numbers in fonts