Final ThoughtsĪlong with the aforementioned color formats, viewport units are one of those aspects of CSS that has always felt rather abstract to me. That’s a little frustrating, but since they represent a relatively minuscule amount of Opus’ overall traffic, I’m not going to sweat it. ignore the 100svh setting altogether, and instead, always stick with the “dynamic” handling of the viewport and post header heights. And I always prefer such stability in my web designs.įor what it’s worth, Firefox, Brave, et al. However, it doesn’t have any weird shifting, either, but looks the same all the time. Upon scrolling, the post header doesn’t take advantage of the increased viewport height, so it’s not a truly “full-height” element. You can see the results - that is, the entire post header - in Figure B. (The viewport is basically the browser window minus any UI elements like the navigation and search bar.)Ĭonsider this very simple example: header Figure B: After switching to a “small” viewport unit, the entire post header is now visible. Put simply, viewport units allow you to size a page’s elements relative to the size of the browser’s viewport, which contains everything that is currently visible on a webpage. (Which is why I’m of the opinion that “full-time CSS engineer” ought to be a thing, but that’s a topic for another post.) Speaking personally, I’m still pretty ignorant concerning the benefits of newer color formats like hwb() and lch(). Inevitably, then, some new features might fall through the cracks and get overlooked. Container queries are now a reality and looking ahead, native CSS nesting is on its way ( decisions concerning its syntax notwithstanding).īut all of these new and upcoming features means that CSS is becoming increasingly complicated. Newer selectors like :has(), :is(), and :where() have lead to more powerful and concise CSS. Custom properties (aka, CSS variables) opened up new possibilities for theming. Flexbox and grid revolutionized how we build webpage layouts. One of the most exciting aspects of web development in recent years has been the continued growth and improvement of CSS.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |