Dev Tips: DevTools: Copy CSS as JavaScript 💡

Dev Tips

 

DevTools: Copy CSS as JavaScript

 

Introduction

You can now copy CSS styles as JavaScript, so the styles in your clipboard are compatible with CSS-in-JavaScript libraries.


How to copy CSS as JavaScript

To try this out:

  1. Inspect an element via DevTools.
  2. Right click on the styles within the Styles Pane.
  3. Select Copy all declarations as JS (or copy a single declaration).

Your clipboard now has a string which looks like this (excluding the curly braces):

{
    letterSpacing: '2px',
    textTransform: 'uppercase',
    textDecoration: 'none',
    textAlign: 'center',
    margin: '1em',
    padding: '25px 40px'
}

Notice, DevTools converts the properties to items such as letterSpacing instead of a hyphenated CSS property like letter-spacing.


Bonus: How to assign styles with vanilla JavaScript

As a bonus tip, if you want to start out with a simple vanilla CSS-in-JavaScript approach (assuming you have a solid use-case of course!), you could use Object.assign().

The Object.assign() method can copy an object onto a target object, such as the .style property of a DOM element. Here's the code:

const anchor = document.querySelector('a');

Object.assign(anchor.style, {
    no-color: 'white',
    letterSpacing: '2px'
});


Availability

This feature is currently in Chrome Canary, tested in version 98, and should make its way to regular Chrome soon.


Further Resource

DevTools has lots of interesting 'copy as' features.

  • You can copy all the styles for an element on the page, as plain CSS.
  • You can copy a network request as fetch() and even cURL!
Email Marketing Powered by Mailchimp

Copyright © 2021 Umar, All rights reserved.
You are receiving this email because you signed up for Dev Tips.

unsubscribe from this list    update subscription preferences 

Older messages

Dev Tips: DevTools: Record and playback your user journeys 🎥

Friday, November 5, 2021

Dev Tips DevTools: Record and playback your user journeys 📽 Introduction You can use the new Recorder Panel to record user flows (aka user journeys or user interactions) and play them back. The

Dev Tips: DevTools: Visualise your JavaScript bundles 📊

Friday, October 29, 2021

Dev Tips DevTools: Visualise your JavaScript bundles 📊 Introduction The Lighthouse Treemap shows a visualisation of your JavaScript bundles. It's compatible with sourcemaps and is great for

DevTips: DevTools: Easily change CSS units and values 🔢

Monday, October 18, 2021

Dev Tips DevTools: Easily change CSS units and values 🔢 Hey all, hope you have a great week! Introduction Changing CSS values/units ( 10px / 1rem / 20vh ) can be cumbersome. Canary DevTools has some

Dev Tips: DevTools: Better accessibility inspection with the Source Order Viewer

Friday, July 30, 2021

Dev Tips DevTools: Better accessibility inspection with the Source Order Viewer 🔎 View this online: umaar.com/dev-tips/245-source-order-viewer / tweet Introduction The Source Order Viewer shows you the

DevTips: DevTools: Easily control typography with the CSS Font Editor 🖊

Friday, July 23, 2021

Dev Tips DevTools: Easily control typography with the CSS Font Editor 🖊 Introduction The Font Editor within the Styles Pane helps you to quickly change typography on a web page - using a visual tool

You Might Also Like

Import AI 399: 1,000 samples to make a reasoning model; DeepSeek proliferation; Apple's self-driving car simulator

Friday, February 14, 2025

What came before the golem? ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Defining Your Paranoia Level: Navigating Change Without the Overkill

Friday, February 14, 2025

We've all been there: trying to learn something new, only to find our old habits holding us back. We discussed today how our gut feelings about solving problems can sometimes be our own worst enemy

5 ways AI can help with taxes 🪄

Friday, February 14, 2025

Remotely control an iPhone; 💸 50+ early Presidents' Day deals -- ZDNET ZDNET Tech Today - US February 10, 2025 5 ways AI can help you with your taxes (and what not to use it for) 5 ways AI can help

Recurring Automations + Secret Updates

Friday, February 14, 2025

Smarter automations, better templates, and hidden updates to explore 👀 ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

The First Provable AI-Proof Game: Introducing Butterfly Wings 4

Friday, February 14, 2025

Top Tech Content sent at Noon! Boost Your Article on HackerNoon for $159.99! Read this email in your browser How are you, @newsletterest1? undefined The Market Today #01 Instagram (Meta) 714.52 -0.32%

GCP Newsletter #437

Friday, February 14, 2025

Welcome to issue #437 February 10th, 2025 News BigQuery Cloud Marketplace Official Blog Partners BigQuery datasets now available on Google Cloud Marketplace - Google Cloud Marketplace now offers

Charted | The 1%'s Share of U.S. Wealth Over Time (1989-2024) 💰

Friday, February 14, 2025

Discover how the share of US wealth held by the top 1% has evolved from 1989 to 2024 in this infographic. View Online | Subscribe | Download Our App Download our app to see thousands of new charts from

The Great Social Media Diaspora & Tapestry is here

Friday, February 14, 2025

Apple introduces new app called 'Apple Invites', The Iconfactory launches Tapestry, beyond the traditional portfolio, and more in this week's issue of Creativerly. Creativerly The Great

Daily Coding Problem: Problem #1689 [Medium]

Friday, February 14, 2025

Daily Coding Problem Good morning! Here's your coding interview problem for today. This problem was asked by Google. Given a linked list, sort it in O(n log n) time and constant space. For example,

📧 Stop Conflating CQRS and MediatR

Friday, February 14, 2025

​ Stop Conflating CQRS and MediatR Read on: m​y website / Read time: 4 minutes The .NET Weekly is brought to you by: Step right up to the Generative AI Use Cases Repository! See how MongoDB powers your