Search

Nalezeno "queries": 129

Creating websites with prefers-reduced-data

8.12.2020
Spoiler alert: There is no support for it yet. But it is defined in the Media Queries Level 5 spec that includes other recent, but more familiar user preference features, like prefers-color-scheme and prefers-reduced-motion. The Polypane blog goes into incredible depth on prefers-reduced-data...

Minimal Takes on Faking Container Queries

2.12.2020
It’s sounding more and more likely that we’re actually going to get real container queries. Google is prototyping a syntax idea from David Baron and refined by Miriam Suzanne. Apparently, there has already been some prototyping done for a switch() syntax which is like container queries...

What’s Missing from CSS?

21.11.2020
The survey results from the State of CSS aren’t out yet, but they made this landing page that randomly shows you what one person wrote to answer that question. Just clicking the reload button a bunch, I get the sense that the top answers are: Container Queries Parent...

The Raven Technique: One Step Closer to Container Queries

10.11.2020
For the millionth time: We need container queries in CSS! And guess what, it looks like we’re heading in that direction. When building components for a website, you don’t always know how that component will be used. Maybe it will be render as wide as the browser window is. Maybe two of them...

A Complete Guide to CSS Media Queries

2.10.2020
Media queries can modify the appearance (and even behavior) or a website or app based on a matched set of conditions about the user's device, browser or system settings. The post A Complete Guide to CSS Media Queries appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter

Achieving Vertical Alignment (Thanks, Subgrid!)

30.9.2020
Our tools for vertical alignment have gotten a lot better as of late. My early days as a website designer involved laying out 960px wide homepage designs and aligning things horizontally across a page using a 12-column grid. Media queries came along which required a serious mental shift. It solved...

Linearly Scale font-size with CSS clamp() Based on the Viewport

25.9.2020
Responsive typography has been tried in the past with a slew of methods such as media queries and CSS calc(). Here, we’re going to explore a different way to linearly scale text between a set of minimum and maximum sizes as the viewport’s width increases, with the intent of making its behavior...

Interaction Media Features and Their Potential (for Incorrect Assumptions)

14.9.2020
The Media Queries Level 4 Interaction Media Features — pointer, hover, any-pointer and any-hover — are meant to allow sites to implement different styles and functionality (either CSS-specific interactivity like :hover, or JavaScript behaviors, when queried using window.matchMedia), depending...

Working with JavaScript Media Queries

7.9.2020
What’s the first thing that comes to mind when you think of media queries? Maybe something in a CSS file that looks like this: body {   background-color: plum; } 
 @media (min-width: 768px) {   body {     background-color: tomato;   } } CSS media queries are a core ingredient in any responsive...

Beyond Media Queries: Using Newer HTML & CSS Features for Responsive Designs

4.9.2020
Beyond using media queries and modern CSS layouts, like flexbox and grid, to create responsive websites, there are certain overlooked things we can do well to make responsive sites. In this article, we’ll dig into a number tools (revolving around HTML and CSS) we have at the ready, from responsive...

How to Make a Media Query-less Card Component

1.9.2020
Fun fact: it’s possible to create responsive components without any media queries at all. Certainly, if we had container queries, those would be very useful for responsive design at the component level. But we don’t. Still, with or without container queries, we can do things to make our components...

New in Chrome: CSS Overview

1.7.2020
Here’s a fancy new experimental feature in Chrome! Now, we can get an overview of the CSS used on a site, from how many colors there are to the number of unused declarations… even down to the total number of defined media queries. Again, this is an experimental feature. Not only does that...

Responsive Styling Using Attribute Selectors

30.6.2020
One of the challenges we face when implementing class-based atomic styling is that it often depends on a specific breakpoint for context. <div class="span-12"</div<!-- we want this for small screens  --<div class="span-6"</div<!-- we want this for medium screens --<div...

First Steps into a Possible CSS Masonry Layout

18.5.2020
It’s not at the level of demand as, say, container queries, but being able to make “masonry” layouts in CSS has been a big ask for CSS developers for a long time. Masonry being that kind of layout where unevenly-sized elements are layed out in ragged rows. Sorta like a typical...

React Single File Components Are Here

13.5.2020
Shawn Wang is talking about RedwoodJS here: …  it is the first time React components are being expressed in a single file format with explicit conventions. Which is the RedwoodJS idea of Cells. To me, it feels like a slightly cleaner version of how Apollo wants you to do it with useQuery....

Playing With (Fake) Container Queries With watched-box & resizeasaurus

5.5.2020
Heydon’s <watched-box> is a damn fantastic tool. It’s a custom element that essentially does container queries by way of class names that get added to the box based on size breakpoints that are calculated with ResizeObserver. It’s like a cleaner version of what Philip...

SVG, Favicons, and All the Fun Things We Can Do With Them

24.4.2020
Favicons are the little icons you see in your browser tab. They help you understand which site is which when you’re scanning through your browser’s bookmarks and open tabs. They’re a neat part of internet history that are capable of performing some cool tricks. One very new trick is the ability...

Nahoru
Tento web používá k poskytování služeb a analýze návštěvnosti soubory cookie. Používáním tohoto webu s tímto souhlasíte. Další informace