Selection CSS code
In Advanced Views, every Post Selection can have its own CSS. When present, the CSS is automatically injected into the page's <head> section. This ensures styles are available before the content is rendered, improving the user experience and reducing the First Contentful Paint (FCP).
Before the CSS is added to the page, Advanced Views automatically performs basic minification, so there's no need for additional optimization tools or build steps.
On-Demand CSS loading
Advanced Views uses an on-demand asset loading strategy. This means a Post Selection's CSS is only loaded on pages where that Layout is actually used. Advanced Views handles this automatically behind the scenes.
This approach completely eliminates the need for asset bundling, allowing you to create independent Post Selections that editors can mix and match in any combination, without having tons of site-wide CSS.
1. Adding custom CSS to any Post Selection
Create a new Post Selection or open an existing one
On the Post Selection edit screen, switch to the CSS & JS tab.
Insert or paste your CSS styles in the CSS Code field.
Click on the Update button to publish your changes.
2. Magic CSS aliases
Scoping CSS to a specific component is a common task. Although every Post Selection has a unique ID-based class in the generated markup, adding it to every selector is repetitive and error-prone.
Advanced Views solves this with CSS aliases. Use them anywhere in a Post Selection's CSS, and they will be automatically replaced with the appropriate selector:
#selection
.avf-selection--id--X
.bem-name
#this__
.avf-selection__
.bem-name__
#selection__
.avf-selection--id--X .avf-selection__
.bem-name .bem-name__
In Practice
Display fields and their labels on one line using:
Using a selector inside another selector is a built-in CSS feature called nesting.
3. CSS libraries
3.1) Enqueuing a custom library
To add complex interactive elements, like sliders, you'll need to use some libraries, which come with their own CSS files. If you use Advanced Views Pro, read about the Pre-built libraries to get a hassle-free experience.
If you use Advanced Views Lite, or need to employ a specific library that is missing from the built-in list, you need to enqueue it on the target page.
Classic enqueuing in WordPress happens with the wp_enqueue_style function, but to avoid sitewide enqueueing (which is bad for performance), it requires manual detection of the target pages.
That's why we recommend using the CSS @import feature instead:
Just add the import to the top of your Layout CSS code, and the browser will load this library on pages that require it. Don't worry if you have several components or multiple instances of the same component on a single page. According to the standard, the browser will download the library only once.
We recommend bypassing the domain name and starting the path from the /wp-content folder. This ensures that the import works dynamically across Staging and Live environments.
3.2) Sass usage
In Advanced Views, there is a File System Storage option. If you enable it, you can utilize Sass for Post Selections CSS code - check advanced FS storage usage for details.
3.2) Tailwind usage
In Advanced Views, there is a File System Storage option. If you enable it, you can utilize Tailwind for Post Selections CSS code - check advanced FS storage usage for details.
Last updated