Streaming live at 10am (PST)

New CSS Preview

#1

Anybody else see this feature in the new video?

Looks awesome

1 Like
#2

Where is it? Haven’t seen this before.

#3

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

#4

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

#5

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.

#6

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

#7

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:

#9

@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

4 Likes
#10

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
#11

This would be so cool.

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

Is anyone else experiencing this?

Teresa - Webflow Designer

#12

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

#13

Thank you.

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

Teresa - Webflow Designer

#15

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.

#16

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
        }]
    }
4 Likes
#17

Ahhh, of course, thanks! :facepunch:

#18

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