CSS has math and comparison functions like min(), max(), and minmax(). You have probably seen the issue that 3 columns layout looks strange at some viewport sizes where there isn’t enough room for content. Let’s try to automate our grid layout with the magic of CSS: This CSS creates a grid layout with a dynamic …
Years and years we have used padding hack for responsive videos and iframes. But now we can use aspect-ratio property. The aspect-ratio property allows you to set the aspect ratio of an element directly. Here’s an example code to set an aspect ratio of 16:9 for an iframe using the aspect-ratio property: In the above …
Yeah yeah, naming CSS custom properties (CSS variables) or Sass variables is hard. But even that is not the full picture. In ideal world they are shared with design tools like Figma or Sketch. developers, UX, and visual designers can quickly understand what they mean. adding or removing variables isn’t too painful. Changing the values …
Uh, this one is hard to explain. I have debug it about 5 days. When using assistive text for screen readers we usually do it like this. ` .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute; } ` It works on most cases but I hard weird issue when building social navigation menu. Using …