Streaming live at 10am (PST)

New CSS Preview

Anybody else see this feature in the new video?

40%20PM

Looks awesome

1 Like

Where is it? Haven’t seen this before.

I know it’s been an internal feature for a little while. I think eventually we will get it…? Not sure though.

I hope we get it, it’s a good way to teach native css within webflow

I actually know dev’s who will make layouts in Webflow because the CSS is so clean and then export and hook it up to their web apps.

@John_Merritt I just reached out to a webflow team member. He confirmed that they use it for marketing/education stuff internally only.

You can always export your style sheets with the code option though :slight_smile:

Would be a good feature for us whos using Webflow for prototyping. The devs could easely select a element and grab snippets instead of going through the source code. :slight_smile:

@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 - https://whatsmybrowser.org/b/ZMX3MWQ

@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?