QuickDevBoxCSS Cursor Properties: Standard User Feedback Cursors & Custom SVG Hotspots
The CSS cursor property provides visual affordances signaling element interactivity. Supported cursors range from system controls (pointer, grab, not-allowed, text) to custom SVG vectors with defined pixel coordinate hotspots.
CSS Properties & Syntax Reference
| CSS Rule / Parameter | Syntax Specification & Compositor Behavior |
|---|---|
| System Cursors | default, pointer, text, move, grab, grabbing, not-allowed, wait |
| Custom URL Syntax | cursor: url('icon.svg') |
| Affordance Guideline | pointer signals clickable links/buttons; not-allowed signals disabled state |
| Standard | W3C CSS Basic User Interface Module Level 4 § cursor |
Cross-Browser Rendering & Compositor Engine Support
-webkit-) for backdrop filters, clip paths, and text smoothing.
Production CSS Recipes & Snippets
Custom Vector Cursor with Defined Hotspot
.custom-target {
/* Coordinates (4, 4) define the precise active click point inside the 24x24 SVG */
cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23ef4444'/%3E%3C/svg%3E") 4 4, crosshair;
}Accessible Disabled Button Cursor
.btn:disabled {
cursor: not-allowed;
opacity: 0.6;
}GPU Compositing & Layout Performance Tuning
Modern browser rendering engines divide graphical updates into Style, Layout, Paint, and Composite stages. High-performance interfaces optimize execution by isolating dynamic animations to compositor-only CSS properties—specifically transform and opacity. Altering geometry properties like width, margin, or top forces full layout reflows and repaints, increasing CPU utilization and causing frame drops on lower-power mobile devices. Leverage hardware layer promotion strategically to preserve 60 FPS visual smoothness, and explicitly reserve component aspect ratios to ensure Cumulative Layout Shift (CLS) scores remain at zero. Profile paint timings under 4x CPU throttling in Chrome DevTools to eliminate paint invalidation bottlenecks.