In traditional responsive design, we rely on media queries to change styles based on the overall viewport size. This works well for adjusting layouts for different screen sizes, but it falls short when you need components to adapt based on their container’s size. To solve this situation, Container Queries were introduced in CSS. They allow you to apply styles to elements based on the dimensions of their containing block, giving…
CSS Scroll Snap was introduced to allow you to define snap points for scrollable elements. It ensures that the scrolling lands precisely at the desired points. This new CSS feature is especially useful for creating carousels, slideshows, or any layout where you want to control the user’s scrolling experience. Let’s see how it works. New Properties The CSS Scroll Snap module introduces two main new properties to give us more…
Managing CSS can be tricky, especially when styles need to override each other. This often makes it hard to keep the styles in the right places. To simplify things, the :where selector was added in CSS. This is a special CSS selector that allows you to group selectors without increasing their specificity, making it easier to override styles when needed. Consider the following HTML: 1st paragraph 2nd paragraph …
The CSS :is selector is a handy pseudo-selector that simplifies complex selector queries. It allows you to group multiple selectors into a single, more readable form, which can help reduce redundancy and make your CSS more maintainable. Before the :is selector, you’d need to repeat the same styles for multiple selectors, leading to long and repetitive code. For example, if you wanted to apply the same styles under the main…
Getting To The Bottom Of Minimum WCAG-Conformant Interactive Element Size Getting To The Bottom Of Minimum WCAG-Conformant Interactive Element Size Eric Bailey 2024-07-19T13:00:00+00:00 2025-03-19T12:04:52+00:00 There are many rumors and misconceptions about conforming to WCAG criteria for the minimum sizing of interactive elements. I’d like to use this post to demystify what is needed for baseline compliance and to point out an approach for making successful and inclusive interactive experiences using…
While Laravel is popular for its rich features and ease of use, there are many other PHP frameworks that might better suit your needs. In this article, we will explore 10 great alternatives to Laravel, each with its own unique strengths and features. Whether you’re looking for something lightweight, highly customizable, or built for high performance, I believe there’s an option here for you. Without further ado, let’s jump in…
PHP has come a long way and continues to improve with new features, syntax, and speed. The ecosystem is also expanding, with many developers creating frameworks to simplify the lives of other developers. Popular, full-featured frameworks like Laravel and Symfony exist, as do lightweight microframeworks like FrameworkX. It is a lightweight microframework for PHP that uses an event-driven, non-blocking architecture, similar to Node.js which is perfect for high-concurrency and real-time…
How To Make A Strong Case For Accessibility How To Make A Strong Case For Accessibility Vitaly Friedman 2024-06-26T12:00:00+00:00 2025-03-19T12:04:52+00:00 Getting support for accessibility efforts isn’t easy. There are many accessibility myths, wrong assumptions, and expectations that make accessibility look like a complex, expensive, and time-consuming project. Let’s fix that! Below are some practical techniques that have been working well for me to convince stakeholders to support and promote accessibility…
What Are CSS Container Style Queries Good For? What Are CSS Container Style Queries Good For? Juan Diego Rodríguez 2024-06-14T11:00:00+00:00 2025-03-19T12:04:52+00:00 We’ve relied on media queries for a long time in the responsive world of CSS but they have their share of limitations and have shifted focus more towards accessibility than responsiveness alone. This is where CSS Container Queries come in. They completely change how we approach responsiveness, shifting the…
FrankenPHP is a new PHP runtime designed to modernize PHP architecture. It is built on top of Caddy, and it includes Caddy’s built-in features such as automatic SSL, native support for HTTP3, and Early Hints. It also supports compression methods like Gzip, Brotli, and Zstd. Additionally, it features a built-in Mercure hub, enabling real-time push events without the need for additional libraries or SDKs. With all these features, FrankenPHP promises…