![]() What we need is a way to eliminate any margins that push up against the container. This will give us more uniform space around the box. What we want instead is to only have the padding on the top and bottom and to not have any margins involved. The margin below the last paragraph gets added to the bottom padding on the container, which probably adds up to more whitespace than intended. The margin above the headline and the top padding on the container get added together to determine how much space there is between the top edge of the box and that first line of text. There's also padding applied to the container, the article element with a class of card. They all have top and bottom margins, which provide space between them, as well as space above and below the whole group. ![]() Imagine we have a headline and three paragraphs. The new margin-trim property makes it easy to remove margins from elements that push up against their container. What is ready to be shipped in browsers today? Margin trim. We look forward to shipping Masonry in Safari once it's ready. ![]() More discussion is needed in the CSS Working Group, where browser makers and others come together to agree on a path forward, including work to make sure that it's fully accessible. Combining Masonry with Grid makes for a far more powerful mechanism than the popular JavaScript library. You can define Masonry in one dimension, and use the power of Grid to do anything you want in the other dimension, like making the columns different sizes with fr units, or making the first column fixed-width, while the middle is flexible using an fr unit, and the third is made flexible with a minmax value. Making this part of CSS Grid gives us tremendous flexibility. Then grid-template-rows: masonry packs items into a Masonry pattern in the row direction with just one line of code. display: grid gets us started, and grid-template-columns gives us flexible columns that automatically increase in number when more space is available. I created this typical Masonry layout with very little CSS. We believe in this idea and we'd like to see it come to the web, so now it's in Safari Technology Preview- on by default- where you can try it out, tell us what you think, and help us move it forward. A proposal for creating Masonry as part of CSS Grid was started several years ago and implemented in Firefox as an experiment behind a flag. But JavaScript is slower at layout than CSS, and it's more fragile. So websites have had to use JavaScript to accomplish this. Which is especially needed when more content gets loaded at the bottom as the user scrolls. Instead, designers want their content to flow across the page, placing each item in whichever column puts it as close to the top as possible. CSS Multicolumn is a layout mechanism that's been in browsers for decades. You can accomplish a layout with this shape by using CSS Multicolumn, if it's OK that the content order starts in the first column, flows down below the viewport, goes back up to the top the second column, flows down it, then on to the third column, and so on. It's a great way to pack content of different sizes. For years, this has been a popular layout pattern on the web. To see the future today, download Safari Technology Preview. I'm going to share things that have already shipped, things that will ship in Safari 17, and things we're working on for the future. In this session, we'll take a look at some of the most exciting new features in CSS, including brand-new possibilities with layout, a whole generation of color tools that make full use of today's amazing displays, productive ways to solve tricky problems with new pseudo-classes, and CSS that lets you take your typography to the next level. There's so much, there's no way we can cover it all, so we decided to focus on CSS. We've already shipped more than 140 new web technologies in multiple releases of Safari throughout this year, and we have several dozen more new web technologies coming this fall. ♪ ♪ Jen: Hello, I'm Jen Simmons, a Safari and WebKit Evangelist here at Apple.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |