This module allows you to add custom CSS directly to entities like nodes or users. It offers two ways to input CSS: a structured format with separate fields for selectors and styles, or a free-form text area. The module helps prevent CSS conflicts by automatically adding namespaces or prefixes to your styles.
The Field CSS module provides a field (which can then be added to any entity type) that accepts css, does minimal processing and then adds the css to the entity display.
It provides options to namespace any of the css declarations.
It provides two widgets, one that allows for structured entering of the CSS with the selector and the style in different fields, and a free form widget where all of the css can be entered in one large text area.
This structured approach allows for some validation of the content. The field attempt to stop people from entering CSS in away that would get around a selector prefix by
- Striping :root from the selector
- Parsing on all { } so that every selector gets the prefix
If the library CodeMirror is present then Field CSS also provides syntax highlighting.
It is worth noting that this module is very indebted to the Code Per Node module. Both for some good ideas as well as for the CodeMirror implementation. It has some overlap with this module, the main differences being:
- Code Per Node also does JS
- Field CSS is based on the Drupal Field API and therefor can be add to any entity and works in any paradigm that used the Field API (such as translation or workflow)
- In General Code Per Node is much more mature and has more features.
Ask your assistant about Field CSS
Check compatibility with your Drupal and PHP version, maintenance and security coverage, from current release data. How it works
Depends on
Dependencies of the latest stable release
No dependencies recorded for this project.
Required by
1 tracked project depends on this one