New CSS Preview

@John_Merritt the Webflow team just released this in open beta! :star_struck:

To access CSS Preview go to the lower left corner of the Designer. Click the “?” and select CSS Preview.

08

5 Likes

Just noticed this, I’m already finding it really helpful for debugging and working with sites/apps that use exported Webflow code – I hope it stays…

1 Like

This would be so cool.

Unfortunately, mine is just showing up blank - no css information.

Is anyone else experiencing this?

Teresa - Webflow Designer

Click any element on canvas and its properties will show in the css preview

Thank you.

I think it was just a temporary glitch, because it’s working great now. :slight_smile:

Teresa - Webflow Designer

I’m wondering what the deal is with the seemingly custom pseudo-classes (:tiny, etc.).

CSS%20Preview%20(BETA)

I just started using Webflow, and am poking around the “Portfolio Starter” template.

Hi @Zeke8990 , Welcome to the forums!

Good eye for a first time poster!

They represent the default breakpoints in Webflow.

tiny: mobile portrait
small: mobile landscape
medium : tablet
large: main

They are initialized in the Webflow main JavaScript file.

 "site": {
        "mediaQueries": [{
            "key": "main",
            "min": 992,
            "max": 10000
        }, {
            "key": "medium",
            "min": 768,
            "max": 991
        }, {
            "key": "small",
            "min": 480,
            "max": 767
        }, {
            "key": "tiny",
            "min": 0,
            "max": 479
        }]
    }
5 Likes

Ahhh, of course, thanks! :facepunch:

I love this, it’s already been very helpful.
I also love the pseudo class names via js idea. Smart.

I’ve just found this CSS Preview Beta today and it’s pretty sweet!

BUG
However, I can’t copy the text in the preview - which would be very handy!

Using Chrome on Windows 10 - What browser am I using?

@Diarmuid_Sexton yes, it’s been around for a while :slight_smile: and unfortunately, that’s not a bug. It’s just the way the preview works. It’s confusing since you can select the text but it doesn’t do anything once you try to copy/paste.

Ok. Does it not seem logical to be able to copy and paste it? I’ve found a workaround but for others, it feels like copy should work natively.

@Diarmuid_Sexton yes, it does, it’s just not built-in at the moment, it’s in beta so maybe that will change?

The ability to copy from the CSS Preview panel just seems like a no-brainer to me, and would be SOO useful. Hoping they enable it soon!

@Diarmuid_Sexton what is your workaround to copy the code?

You highlight the text, then right click and in chrome you can click “Search Google for…” And that will paste the css into the Google Search bar - and you can then copy it from there.

1 Like

Hi

Can you demonstrate it with loom (video) for the rest of us? :slight_smile:

2 Likes

You should take another look now :wink:

3 Likes

Yep - saw that’s there’s now a button to copy to clipboard - thanks Webflow!

1 Like