JavaFX brings powerful CSS styling capabilities to desktop applications, enabling rich, customizable user interfaces that rival modern web applications. This deep dive explores advanced CSS techniques, theming strategies, and performance optimizations for JavaFX applications.
JavaFX CSS Architecture Overview
JavaFX CSS extends standard CSS with JavaFX-specific properties and pseudo-classes:
CSS Processing Pipeline: ┌─────────────────┐ ┌──────────────────┐ ┌─────────────────┐ │ CSS Files │ -> │ JavaFX CSS │ -> │ Rendered │ │ & Inline │ │ Parser & │ │ Scene Graph │ │ Styles │ │ Cascade Engine │ │ Nodes │ └─────────────────┘ └──────────────────┘ └─────────────────┘
Core CSS Syntax and Selectors
1. Basic Node Styling
/* Standard CSS selectors with JavaFX extensions */
.button {
-fx-background-color: linear-gradient(to bottom, #4a90e2, #357abd);
-fx-text-fill: white;
-fx-font-size: 14px;
-fx-padding: 8px 16px;
-fx-background-radius: 4px;
-fx-border-radius: 4px;
}
.label {
-fx-font-family: "Segoe UI", "Arial", sans-serif;
-fx-font-size: 13px;
-fx-text-fill: #333333;
}
.text-field {
-fx-background-color: white;
-fx-border-color: #cccccc;
-fx-border-width: 1px;
-fx-border-radius: 3px;
-fx-padding: 6px 8px;
}
2. Advanced Selectors and Combinators
/* ID selector */
#submit-button {
-fx-background-color: #28a745;
}
/* Class selector */
.error-message {
-fx-text-fill: #dc3545;
-fx-font-weight: bold;
}
/* Pseudo-classes */
.button:hover {
-fx-background-color: linear-gradient(to bottom, #5a9ce2, #458bcd);
-fx-scale-x: 1.02;
-fx-scale-y: 1.02;
-fx-cursor: hand;
}
.button:pressed {
-fx-background-color: linear-gradient(to bottom, #357abd, #2a6ca8);
-fx-scale-x: 0.98;
-fx-scale-y: 0.98;
}
/* Child combinator */
.vbox > .label {
-fx-font-weight: bold;
}
/* Descendant combinator */
.dialog .content {
-fx-padding: 20px;
}
/* Attribute selector */
.text-field[required="true"] {
-fx-border-color: #ffc107;
}
/* Structural pseudo-classes */
.table-row-cell:even {
-fx-background-color: #f8f9fa;
}
.table-row-cell:odd {
-fx-background-color: white;
}
.table-row-cell:selected {
-fx-background-color: #007bff;
-fx-text-fill: white;
}
JavaFX-Specific CSS Properties
1. Layout and Sizing Properties
.container {
/* Sizing */
-fx-min-width: 200px;
-fx-pref-width: 400px;
-fx-max-width: 800px;
-fx-min-height: 100px;
-fx-pref-height: 300px;
-fx-max-height: 600px;
/* Spacing */
-fx-spacing: 10px;
-fx-padding: 15px;
/* Alignment */
-fx-alignment: center-left;
}
/* Region-specific properties */
.region-styled {
-fx-border-width: 2px;
-fx-border-color: #dee2e6;
-fx-background-radius: 8px;
-fx-border-radius: 8px;
-fx-background-insets: 5px;
-fx-border-insets: 5px;
}
2. Advanced Background and Border Styling
.gradient-button {
/* Complex background with multiple fills */
-fx-background-color:
linear-gradient(to bottom, #667eea 0%, #764ba2 100%),
radial-gradient(center 50% 50%, radius 50%, #ffffff33, #00000033);
-fx-background-insets: 0, 5px;
-fx-background-radius: 10px;
}
.advanced-border {
/* Multiple borders using insets */
-fx-border-color:
#007bff /* Outer border */,
#ffffff /* Inner border */;
-fx-border-width:
2px /* Outer */,
1px /* Inner */;
-fx-border-insets:
0px /* Outer */,
2px /* Inner */;
-fx-border-radius: 8px;
}
.shadow-effect {
-fx-effect: dropshadow(gaussian, rgba(0,0,0,0.3), 10, 0.3, 2, 2);
}
Custom Controls and Substructure Styling
1. Styling Complex Controls
/* ComboBox substructure */
.combo-box {
-fx-background-color: white;
-fx-border-color: #ced4da;
-fx-border-radius: 4px;
}
.combo-box .arrow-button {
-fx-background-color: transparent;
-fx-border-color: transparent;
}
.combo-box .list-cell {
-fx-padding: 8px 12px;
-fx-background-color: white;
}
.combo-box .list-view {
-fx-background-color: white;
-fx-border-color: #ced4da;
}
/* TableView substructure */
.table-view {
-fx-border-color: #dee2e6;
-fx-border-width: 1px;
}
.table-view .column-header {
-fx-background-color: #f8f9fa;
-fx-border-color: #dee2e6;
-fx-font-weight: bold;
-fx-padding: 10px 8px;
}
.table-view .table-cell {
-fx-padding: 8px;
-fx-border-color: transparent transparent #dee2e6 transparent;
}
/* TreeView substructure */
.tree-view {
-fx-border-color: #dee2e6;
}
.tree-cell {
-fx-padding: 5px 0px;
}
.tree-cell:selected {
-fx-background-color: #007bff;
-fx-text-fill: white;
}
.tree-cell .tree-disclosure-node {
-fx-padding: 4px;
}
.tree-cell .arrow {
-fx-background-color: #6c757d;
}
2. ProgressBar and Slider Customization
/* Custom ProgressBar */
.progress-bar {
-fx-accent: #28a745;
-fx-background-color: #e9ecef;
-fx-border-color: #ced4da;
-fx-border-radius: 10px;
-fx-background-radius: 10px;
}
.progress-bar .track {
-fx-background-color: #e9ecef;
-fx-background-radius: 10px;
}
.progress-bar .bar {
-fx-background-color: linear-gradient(to right, #28a745, #20c997);
-fx-background-radius: 10px;
-fx-padding: 2px;
}
/* Custom Slider */
.slider {
-fx-background-color: transparent;
}
.slider .track {
-fx-background-color: #e9ecef;
-fx-background-radius: 2px;
-fx-pref-height: 4px;
}
.slider .thumb {
-fx-background-color: #007bff;
-fx-background-radius: 10px;
-fx-pref-height: 20px;
-fx-pref-width: 20px;
-fx-effect: dropshadow(gaussian, rgba(0,0,0,0.2), 5, 0, 0, 1);
}
.slider .thumb:hover {
-fx-background-color: #0056b3;
-fx-scale-x: 1.1;
-fx-scale-y: 1.1;
}
Advanced Theming System
1. CSS Variables and Theme Management
/* theme-variables.css */
.root {
/* Color palette */
-fx-primary-color: #007bff;
-fx-secondary-color: #6c757d;
-fx-success-color: #28a745;
-fx-danger-color: #dc3545;
-fx-warning-color: #ffc107;
-fx-info-color: #17a2b8;
/* Typography */
-fx-font-family: "Segoe UI", system-ui, sans-serif;
-fx-font-size-base: 13px;
/* Spacing */
-fx-spacing-sm: 5px;
-fx-spacing-md: 10px;
-fx-spacing-lg: 15px;
/* Border radius */
-fx-border-radius-sm: 3px;
-fx-border-radius-md: 6px;
-fx-border-radius-lg: 12px;
/* Shadows */
-fx-shadow-sm: dropshadow(gaussian, rgba(0,0,0,0.1), 3, 0, 0, 1);
-fx-shadow-md: dropshadow(gaussian, rgba(0,0,0,0.15), 6, 0, 0, 2);
-fx-shadow-lg: dropshadow(gaussian, rgba(0,0,0,0.2), 12, 0, 0, 4);
}
/* Component styles using CSS variables */
.button {
-fx-background-color: -fx-primary-color;
-fx-text-fill: white;
-fx-font-size: -fx-font-size-base;
-fx-padding: -fx-spacing-md -fx-spacing-lg;
-fx-background-radius: -fx-border-radius-sm;
-fx-effect: -fx-shadow-sm;
}
.button:hover {
-fx-background-color: derive(-fx-primary-color, -10%);
-fx-effect: -fx-shadow-md;
}
2. Multiple Theme Support
/* light-theme.css */
.root {
-fx-base: #ffffff;
-fx-background: #f8f9fa;
-fx-text-color: #212529;
-fx-control-inner-background: white;
-fx-accent: #007bff;
-fx-default-button: #6c757d;
}
/* dark-theme.css */
.root {
-fx-base: #343a40;
-fx-background: #212529;
-fx-text-color: #f8f9fa;
-fx-control-inner-background: #495057;
-fx-accent: #0d6efd;
-fx-default-button: #6c757d;
}
/* high-contrast-theme.css */
.root {
-fx-base: #000000;
-fx-background: #ffffff;
-fx-text-color: #000000;
-fx-control-inner-background: #ffffff;
-fx-accent: #0000ff;
-fx-default-button: #000000;
}
Java Code Integration
1. Dynamic CSS Loading and Switching
public class ThemeManager {
private static final String LIGHT_THEME = "/styles/light-theme.css";
private static final String DARK_THEME = "/styles/dark-theme.css";
private static final String HIGH_CONTRAST_THEME = "/styles/high-contrast-theme.css";
private Scene scene;
private ObservableList<String> stylesheets;
private String currentTheme = LIGHT_THEME;
public ThemeManager(Scene scene) {
this.scene = scene;
this.stylesheets = scene.getStylesheets();
loadTheme(currentTheme);
}
public void switchTheme(String theme) {
stylesheets.remove(currentTheme);
loadTheme(theme);
currentTheme = theme;
}
private void loadTheme(String theme) {
try {
URL themeUrl = getClass().getResource(theme);
if (themeUrl != null) {
stylesheets.add(themeUrl.toExternalForm());
}
} catch (Exception e) {
System.err.println("Failed to load theme: " + theme);
}
}
public void applyUserPreferences(Preferences prefs) {
String preferredTheme = prefs.get("theme", LIGHT_THEME);
switchTheme(preferredTheme);
// Apply font scaling
double fontScale = prefs.getDouble("fontScale", 1.0);
applyFontScaling(fontScale);
}
private void applyFontScaling(double scale) {
String fontStyle = String.format("-fx-font-size: %.2fpx;", 13 * scale);
scene.getRoot().setStyle(fontStyle);
}
}
2. Programmatic Style Manipulation
public class DynamicStyling {
public static void applyConditionalStyles(Node node, String condition) {
switch (condition) {
case "success":
node.setStyle("-fx-border-color: #28a745; -fx-text-fill: #155724;");
node.getStyleClass().add("status-success");
break;
case "warning":
node.setStyle("-fx-border-color: #ffc107; -fx-text-fill: #856404;");
node.getStyleClass().add("status-warning");
break;
case "error":
node.setStyle("-fx-border-color: #dc3545; -fx-text-fill: #721c24;");
node.getStyleClass().add("status-error");
break;
}
}
public static void createAnimatedStyle(Node node, String property, String from, String to) {
Timeline timeline = new Timeline(
new KeyFrame(Duration.ZERO, new KeyValue(
node.styleProperty(),
String.format("%s: %s;", property, from)
)),
new KeyFrame(Duration.seconds(0.3), new KeyValue(
node.styleProperty(),
String.format("%s: %s;", property, to)
))
);
timeline.play();
}
public static void bindStyleToProperty(Node node, String cssProperty, ObservableValue<?> property) {
node.styleProperty().bind(Bindings.createStringBinding(
() -> String.format("-%s: %s;", cssProperty, property.getValue()),
property
));
}
}
Advanced Animation and Transitions
1. CSS-Based Animations
/* Fade-in animation */
@keyframes fadeIn {
from {
-fx-opacity: 0;
}
to {
-fx-opacity: 1;
}
}
.fade-in {
-fx-animation: fadeIn 0.5s ease-in;
}
/* Slide-in from left */
@keyframes slideInLeft {
from {
-fx-translate-x: -100%;
-fx-opacity: 0;
}
to {
-fx-translate-x: 0;
-fx-opacity: 1;
}
}
.slide-in-left {
-fx-animation: slideInLeft 0.3s ease-out;
}
/* Pulse animation */
@keyframes pulse {
0% {
-fx-scale-x: 1;
-fx-scale-y: 1;
}
50% {
-fx-scale-x: 1.05;
-fx-scale-y: 1.05;
}
100% {
-fx-scale-x: 1;
-fx-scale-y: 1;
}
}
.pulse {
-fx-animation: pulse 2s infinite;
}
/* Bounce animation */
@keyframes bounce {
0%, 20%, 53%, 80%, 100% {
-fx-translate-y: 0;
}
40%, 43% {
-fx-translate-y: -10px;
}
70% {
-fx-translate-y: -5px;
}
}
.bounce {
-fx-animation: bounce 1s ease infinite;
}
2. Interactive State Management
/* Toggle button states */
.toggle-button {
-fx-background-color: #e9ecef;
-fx-border-color: #ced4da;
-fx-text-fill: #495057;
}
.toggle-button:selected {
-fx-background-color: #007bff;
-fx-border-color: #0056b3;
-fx-text-fill: white;
}
/* Accordion animations */
.titled-pane {
-fx-animated: true;
-fx-expand-color: #007bff;
}
.titled-pane > .title {
-fx-background-color: #f8f9fa;
-fx-border-color: #dee2e6;
-fx-padding: 12px 15px;
}
.titled-pane:expanded > .title {
-fx-background-color: #e3f2fd;
-fx-border-color: #007bff;
}
/* TabPane transitions */
.tab-pane .tab-header-area .tab {
-fx-background-color: transparent;
-fx-border-color: transparent;
-fx-padding: 8px 16px;
-fx-transition: all 0.2s ease;
}
.tab-pane .tab-header-area .tab:selected {
-fx-background-color: #007bff;
-fx-text-fill: white;
-fx-border-color: #0056b3;
}
.tab-pane .tab-header-area .tab:hover {
-fx-background-color: #e3f2fd;
-fx-text-fill: #007bff;
}
Performance Optimization
1. Efficient CSS Organization
/* base.css - Minimal essential styles */
* {
-fx-font-family: "Segoe UI", sans-serif;
-fx-focus-color: transparent;
-fx-faint-focus-color: transparent;
}
/* layout.css - Layout-specific styles */
.container {
-fx-spacing: 10px;
-fx-padding: 15px;
}
.grid-pane {
-fx-hgap: 10px;
-fx-vgap: 10px;
-fx-padding: 10px;
}
/* components.css - Reusable component styles */
.card {
-fx-background-color: white;
-fx-border-color: #dee2e6;
-fx-border-radius: 8px;
-fx-background-radius: 8px;
-fx-effect: dropshadow(gaussian, rgba(0,0,0,0.1), 5, 0, 0, 2);
-fx-padding: 15px;
}
.badge {
-fx-background-color: #6c757d;
-fx-text-fill: white;
-fx-padding: 3px 8px;
-fx-background-radius: 12px;
-fx-font-size: 11px;
-fx-font-weight: bold;
}
/* themes.css - Theme variations */
.theme-dark .card {
-fx-background-color: #495057;
-fx-border-color: #6c757d;
-fx-text-fill: #f8f9fa;
}
2. CSS Loading Strategy
public class CSSManager {
private static final List<String> CORE_STYLES = Arrays.asList(
"/css/base.css",
"/css/layout.css",
"/css/components.css"
);
private static final Map<String, String> THEME_STYLES = Map.of(
"light", "/css/themes/light.css",
"dark", "/css/themes/dark.css",
"high-contrast", "/css/themes/high-contrast.css"
);
public static void loadCoreStyles(Scene scene) {
ObservableList<String> stylesheets = scene.getStylesheets();
stylesheets.clear();
// Load core styles
for (String style : CORE_STYLES) {
loadStyle(stylesheets, style);
}
}
public static void setTheme(Scene scene, String theme) {
ObservableList<String> stylesheets = scene.getStylesheets();
// Remove existing theme
THEME_STYLES.values().forEach(themeStyle -> {
String externalForm = getExternalForm(themeStyle);
stylesheets.remove(externalForm);
});
// Add new theme
String themeStyle = THEME_STYLES.get(theme);
if (themeStyle != null) {
loadStyle(stylesheets, themeStyle);
}
}
private static void loadStyle(ObservableList<String> stylesheets, String stylePath) {
URL styleUrl = CSSManager.class.getResource(stylePath);
if (styleUrl != null) {
String externalForm = styleUrl.toExternalForm();
if (!stylesheets.contains(externalForm)) {
stylesheets.add(externalForm);
}
}
}
private static String getExternalForm(String stylePath) {
URL styleUrl = CSSManager.class.getResource(stylePath);
return styleUrl != null ? styleUrl.toExternalForm() : "";
}
}
Custom Control Styling
1. Creating Styleable Custom Controls
public class ModernButton extends Button {
private static final String DEFAULT_STYLE_CLASS = "modern-button";
// CSS styleable properties
private final StyleableObjectProperty<Color> glowColor =
new SimpleStyleableObjectProperty<>(StyleableProperties.GLOW_COLOR, this, "glowColor", Color.BLUE);
private final StyleableDoubleProperty glowRadius =
new SimpleStyleableDoubleProperty(StyleableProperties.GLOW_RADIUS, this, "glowRadius", 10.0);
public ModernButton() {
initialize();
}
public ModernButton(String text) {
super(text);
initialize();
}
private void initialize() {
getStyleClass().add(DEFAULT_STYLE_CLASS);
setupBindings();
}
private void setupBindings() {
// Bind glow effect to styleable properties
glowColorProperty().addListener((obs, oldVal, newVal) -> updateGlowEffect());
glowRadiusProperty().addListener((obs, oldVal, newVal) -> updateGlowEffect());
}
private void updateGlowEffect() {
setEffect(new Glow(glowRadius.get()));
// Additional custom effect logic
}
// Styleable properties getters and setters
public Color getGlowColor() { return glowColor.get(); }
public void setGlowColor(Color color) { this.glowColor.set(color); }
public StyleableObjectProperty<Color> glowColorProperty() { return glowColor; }
public double getGlowRadius() { return glowRadius.get(); }
public void setGlowRadius(double radius) { this.glowRadius.set(radius); }
public StyleableDoubleProperty glowRadiusProperty() { return glowRadius; }
// CSS metadata
private static class StyleableProperties {
private static final CssMetaData<ModernButton, Color> GLOW_COLOR =
new CssMetaData<>("-fx-glow-color", PaintConverter.getInstance(), Color.BLUE) {
@Override
public boolean isSettable(ModernButton node) {
return node.glowColor == null || !node.glowColor.isBound();
}
@Override
public StyleableProperty<Color> getStyleableProperty(ModernButton node) {
return node.glowColorProperty();
}
};
private static final CssMetaData<ModernButton, Number> GLOW_RADIUS =
new CssMetaData<>("-fx-glow-radius", SizeConverter.getInstance(), 10.0) {
@Override
public boolean isSettable(ModernButton node) {
return node.glowRadius == null || !node.glowRadius.isBound();
}
@Override
public StyleableProperty<Number> getStyleableProperty(ModernButton node) {
return node.glowRadiusProperty();
}
};
private static final List<CssMetaData<? extends Styleable, ?>> STYLEABLES;
static {
List<CssMetaData<? extends Styleable, ?>> styleables =
new ArrayList<>(Button.getClassCssMetaData());
styleables.add(GLOW_COLOR);
styleables.add(GLOW_RADIUS);
STYLEABLES = Collections.unmodifiableList(styleables);
}
}
@Override
public List<CssMetaData<? extends Styleable, ?>> getCssMetaData() {
return StyleableProperties.STYLEABLES;
}
}
2. Corresponding CSS for Custom Control
.modern-button {
-fx-background-color: linear-gradient(to bottom, #667eea, #764ba2);
-fx-text-fill: white;
-fx-font-weight: bold;
-fx-padding: 12px 24px;
-fx-background-radius: 25px;
-fx-border-radius: 25px;
-fx-cursor: hand;
-fx-glow-color: rgba(102, 126, 234, 0.5);
-fx-glow-radius: 10;
}
.modern-button:hover {
-fx-background-color: linear-gradient(to bottom, #764ba2, #667eea);
-fx-glow-color: rgba(102, 126, 234, 0.8);
-fx-glow-radius: 15;
-fx-scale-x: 1.05;
-fx-scale-y: 1.05;
}
.modern-button:pressed {
-fx-background-color: linear-gradient(to bottom, #5a6fd8, #6a42a0);
-fx-glow-color: rgba(102, 126, 234, 0.3);
-fx-scale-x: 0.95;
-fx-scale-y: 0.95;
}
Debugging and Development Tools
1. CSS Debugging Utilities
public class CSSDebugger {
public static void printAppliedStyles(Node node) {
System.out.println("=== Applied Styles for: " + node.getClass().getSimpleName() + " ===");
// Print style classes
System.out.println("Style Classes: " + node.getStyleClass());
// Print inline style
if (node.getStyle() != null && !node.getStyle().isEmpty()) {
System.out.println("Inline Style: " + node.getStyle());
}
// Print ID
if (node.getId() != null) {
System.out.println("ID: " + node.getId());
}
// Print computed style for specific properties
printComputedStyle(node, "-fx-background-color");
printComputedStyle(node, "-fx-text-fill");
printComputedStyle(node, "-fx-font-size");
printComputedStyle(node, "-fx-padding");
System.out.println("=====================================");
}
private static void printComputedStyle(Node node, String property) {
String value = node.getStyleableParent() != null ?
node.getStyleableParent().getStyle() : node.getStyle();
System.out.println(property + ": " + value);
}
public static void monitorStyleChanges(Node node) {
node.styleProperty().addListener((obs, oldStyle, newStyle) -> {
System.out.println("Style changed for: " + node.getClass().getSimpleName());
System.out.println("Old: " + oldStyle);
System.out.println("New: " + newStyle);
});
node.getStyleClass().addListener((ListChangeListener.Change<? extends String> change) -> {
while (change.next()) {
if (change.wasAdded()) {
System.out.println("Added classes: " + change.getAddedSubList());
}
if (change.wasRemoved()) {
System.out.println("Removed classes: " + change.getRemoved());
}
}
});
}
}
2. Live CSS Reloader for Development
public class LiveCSSReloader {
private final Scene scene;
private final Map<String, File> watchedFiles = new HashMap<>();
private final ScheduledExecutorService scheduler = Executors.newScheduledThreadPool(1);
public LiveCSSReloader(Scene scene) {
this.scene = scene;
}
public void watchCSSFile(String cssPath) {
try {
URL cssUrl = getClass().getResource(cssPath);
if (cssUrl != null && "file".equals(cssUrl.getProtocol())) {
File cssFile = new File(cssUrl.toURI());
watchedFiles.put(cssPath, cssFile);
// Schedule file watcher
scheduler.scheduleAtFixedRate(() -> checkForChanges(cssPath, cssFile),
1, 1, TimeUnit.SECONDS);
}
} catch (Exception e) {
System.err.println("Failed to watch CSS file: " + cssPath);
}
}
private void checkForChanges(String cssPath, File cssFile) {
try {
long currentModified = cssFile.lastModified();
Long lastModified = (Long) cssFile.getUserData();
if (lastModified == null || currentModified > lastModified) {
cssFile.setUserData(currentModified);
reloadCSS(cssPath);
}
} catch (Exception e) {
// File might be temporarily unavailable
}
}
private void reloadCSS(String cssPath) {
Platform.runLater(() -> {
ObservableList<String> stylesheets = scene.getStylesheets();
URL cssUrl = getClass().getResource(cssPath);
if (cssUrl != null) {
String externalForm = cssUrl.toExternalForm();
// Remove and re-add to trigger reload
stylesheets.remove(externalForm);
stylesheets.add(externalForm);
System.out.println("Reloaded CSS: " + cssPath);
}
});
}
public void stop() {
scheduler.shutdown();
}
}
Best Practices and Performance
1. CSS Organization Strategy
styles/ ├── base/ # Foundation styles │ ├── reset.css │ ├── typography.css │ └── variables.css ├── layout/ # Layout components │ ├── grid.css │ ├── flex.css │ └── spacing.css ├── components/ # Reusable components │ ├── buttons.css │ ├── forms.css │ └── navigation.css ├── themes/ # Theme variations │ ├── light.css │ ├── dark.css │ └── high-contrast.css └── pages/ # Page-specific styles ├── dashboard.css ├── settings.css └── reports.css
2. Performance Optimization Tips
/* ✅ GOOD: Use class-based styling */
.button-primary { /* styles */ }
/* ❌ BAD: Avoid overqualified selectors */
vbox > hbox > borderpane > button { /* styles */ }
/* ✅ GOOD: Use CSS variables for theming */
.root { -fx-primary-color: #007bff; }
.button { -fx-background-color: -fx-primary-color; }
/* ❌ BAD: Avoid inline styles in code */
// button.setStyle("-fx-background-color: red;");
/* ✅ GOOD: Use pseudo-classes for states */
.button:hover { /* styles */ }
.button:pressed { /* styles */ }
/* ❌ BAD: Avoid complex calculations in CSS */
/* -fx-background-color: rgb(calc(255 - var(--r)), calc(255 - var(--g)), calc(255 - var(--b))); */
Conclusion
JavaFX CSS provides a powerful, flexible system for styling modern desktop applications:
Key Strengths:
- Familiar CSS syntax with JavaFX extensions
- Powerful theming system with CSS variables
- Advanced animations and transitions
- Custom control styling capabilities
- Performance-optimized rendering
Best Practices:
- Use CSS variables for maintainable theming
- Organize styles in logical modules
- Leverage pseudo-classes for interactive states
- Optimize selector performance
- Use CSS for styling, Java for logic
Advanced Features:
- Custom CSS properties for custom controls
- Dynamic style switching
- CSS-based animations
- Sub-structure styling for complex controls
JavaFX CSS enables the creation of beautiful, responsive, and maintainable user interfaces that can compete with modern web applications while leveraging the full power of the Java ecosystem.