The CSS Cascade, or how browsers resolve competing CSS styles
https:/
This is a great explanation/illustration of the CSS Cascade! đ
https:/
This is a great explanation/illustration of the CSS Cascade! đ
The Right Way to Use fonts.com Web Fonts
Letâs talk about web fonts. More specifically, about a mistake I have seen developers make in several projects for different agencies: Embedding a web font in the wrong way.
While we wait for browsers to implement the text-wrap: balance;
#CSS property and value for text (pleeeeeease! đ), I may have created a silly â and probably sub-optimal â function to do it with HTML block elements:
https://codepen.io/nhoizey/pen/mdjbrVx
Tell me what you think!
But why? Just because a colleague needed it, we could not find a solution in pure CSS, and I like challenges⊠đ
Many of the latest additions to HTML, CSS, and JavaScript first existed as JavaScript libraries or frameworks or pre-processors or polyfills and then found their way into the standards process, back into the layers of web technology that move slower and are more resilient.
Our web design tools are holding us back
nowadays we can build things with CSS that are impossible to create with our design tools. We have scroll-snap, we have complicated animations, we have all kinds of wonderful interaction, grid, flexbox, all kinds of shapes, and so much more that you wonât find in the drop down menus of your tool of choice. Yet our websites still look and behave like they were designed with photoshop.
Layout & Grid in Design Systems
This interdisciplinary disconnect around gridâs mental model affects how teams execute grid. In a broken, unidirectional, âdeveloper handoffâ process, design comps are treated as sacrosanct, and developers see that 12-column semi-transparent pink guideline as a hard requirement that must implemented exactly as articulated by the static design tool. This is how a âhow to do a 12-column grid in HTML/CSS?â Google search ultimately led to massive success for tools like Bootstrap. Despite the introduction of many new CSS technologies and layout techniques over many years, this antiquated 12-column mental model still dominates a lot of conversations around layout and grid.