Announcing 💅 styled-components v2: A smaller, faster drop-in upgrade with even more features
After a six month long iteration process and over 300 commits we’re super excited to announce the official release of styled-components v2! TL;DRHalf the bundle size, (22kB → 12kB) thus much faster to load for your usersBest-in-class server-side rendering with critical CSS, style rehydration and concurrency support out of the boxWe’ve added the.attrs helper to support passing attributes to any sty
✨ polished | A lightweight toolset for writing styles in JavaScript
const styles = { color: lighten(0.2, '#000'), "font-size": modularScale(1), [hiDPI(1.5)]: { "font-size": modularScale(1.25) } } const styles = { color: '#333', "font-size": '1.33em', '@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 1.5/1), only screen and (min-resolution: 144dpi), only scr
Achieve 60 FPS Mobile Animations with CSS3 — SitePoint
This article was originally published on OutSystems. Thank you for supporting the partners who make SitePoint possible. Animating elements in your mobile application is easy. And animating elements in your mobile applications properly is easy, too… if you follow our tips here. While everyone uses CSS3 animations in mobile these days, many do so incorrectly. Developers often disregard best practice
What forces layout/reflow. The comprehensive list.
what-forces-layout.md What forces layout / reflow All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck. Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for a
CSS Grid – Table layout is back. Be there and be square | CSS and UI | Chrome for Developers
TL;DR If you are familiar with Flexbox, Grid should feel familiar. Rachel Andrew maintains a great website dedicated to CSS Grid to help you get started. Grid is now available in Google Chrome. Flexbox? Grid? Over the past few years, CSS Flexbox has become widely used and browser support is looking really good (unless you are one of the poor souls that have to support IE9 and below). Flexbox made
position:sticky is back in Chrome | Blog | Chrome for Developers
Four years ago Eric Bidelman created a rather awesome blog post about the fact that position: sticky landed in WebKit, which at the time was the engine that powered Chrome (as well as many other browsers including Safari). One year later, and much to the consternation of web developers we removed position:sticky from Chrome because "the current implementation isn't designed in a way that integrate
CSS Modules by Example
Css Modules by ExampleCSS Modules are a means to achieve locally scoped CSS class names.For a simple one-page app they may not be necessary. But if you're working on a large 20+ component app, this tool could really help you clean up your CSS. Of course, adopting a new tool can take time. You might wonder: Will I go to all the effort of setting up CSS Modules only to find out they won't work for m
Smooth as Butter: Achieving 60 FPS Animations with CSS3
Animating elements in your mobile applications is easy. Animating elements in your mobile applications properly may be easy, too… if you follow our tips here. While everyone is using CSS3 animations in mobile these days, many are not doing it properly. There are best practices to take into account that are constantly and considerably disregarded. This happens mainly because there are still people
“Scale” FUD and Style Components
Smart folks like to use the word “scale” to scare less experienced folks into doing the “right” thing. I’ve seen this a lot recently from the CSS-Tricks community toward React developers. The threat I hear is: “This idea won’t scale; we’ve already solved this in CSS.” But these arguments from authority are largely unproven, when used with components. So, let’s talk about scale and whether or not t
Improving CSS quality at Facebook and beyond
With thousands of engineers working across a range of products at Facebook, we face some unique challenges when it comes to code quality. Not only are we dealing with a large codebase, but things are also moving fast — new features are being added, existing ones are being improved, and things are being reorganized. For CSS, this means having thousands of files that are in a continuous state of flu
CSS containment in Chrome 52 | Blog | Chrome for Developers
TL;DR The new CSS Containment property lets developers limit the scope of the browser's styles, layout and paint work. It has a few values, making its syntax this: contain: none | strict | content | [ size || layout || style || paint ] It’s in Chrome 52+ and Opera 40+ (and it has public support from Firefox), so give it a whirl and let us know how you go! The contain property When making a web app
Atomic Design
Hey there! I wrote a book called Atomic Design that dives into this topic in more detail, which you can buy as an ebook. We’re not designing pages, we’re designing systems of components.—Stephen Hay As the craft of Web design continues to evolve, we’re recognizing the need to develop thoughtful design systems, rather than creating simple collections of web pages. A lot has been said about creating
Houdini - Demystifying CSS | CSS and UI | Chrome for Developers
Have you ever thought about the amount of work CSS does? You change a single attribute and suddenly your entire website appears in a different layout. It's kind of magic. So far, we—the community of web developers—have only been able to witness and observe the magic. What if we want to come up with our own magic? What if we want to become the magician? Enter Houdini! The Houdini task force consist
CSS coding techniques – Mozilla Hacks - the Web developer blog
Lately, we have seen a lot of people struggling with CSS, from beginners to seasoned developers. Some of them don’t like the way it works, and wonder if replacing CSS with a different language would be better—CSS processors emerged from this thinking. Some use CSS frameworks in the hopes that they will have to write less code (we have seen in a previous article why this is usually not the case). S
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
W3C Invites Implementations of CSS Containment Module Level 1
A pseudo-class for when an element is stickily (spec term) positioned
Remove <style scoped> · Issue #552 · whatwg/html
1291515 - disable <style scoped> in content documents
Initial CSS support by vjeux · Pull Request #1636 · prettier/prettier
The Problem with CSS-In-JS, circa Mid-2016