Crystal-Line Base-Ball 🔮⚾
🎯 Real-time Baseline compatibility detector for CSS, HTML & JavaScript features
A VS Code extension that provides instant visual feedback about web feature compatibility using the Baseline standard. Choose between gutter icons or text highlighting to see which features are widely supported, have limited support, or are experimental.
✨ Features
- 🔮 Dual Visualization Modes: Choose between gutter icons, text decorations, or both
- 🎯 Multi-Language Support: CSS, HTML, and JavaScript feature detection
- 🌐 Comprehensive Coverage: From basic features to cutting-edge experimental APIs
- 💡 Rich Hover Information: Get architecture insights, browser support, and pro tips
- ⚡ Real-time Detection: Instant feedback as you type
- 🎨 Crystal Ball Theme: Cosmic-inspired visual design
🚀 Quick Start
- Install the extension from the VS Code Marketplace
- Open any CSS, HTML, or JavaScript file
- Use Command Palette (
Ctrl+Shift+P) and search for "Crystal Ball"
- Choose your preferred visualization mode:
- Gutter Icons Mode: Icons beside line numbers
- Text Decorations Mode: Colored backgrounds and borders
- Both Modes: Maximum visual feedback
🎯 Feature Status Indicators
- ✅ Green (High): Widely supported baseline features
- ⚠️ Orange (Low): Limited support, use with caution
- 🧪 Purple (Experimental): Cutting-edge features, experimental status
Extension Settings
Include if your extension adds any VS Code settings through the contributes.configuration extension point.
🛠️ Built With
TypeScript, VS Code Extension API, Node.js, ESBuild, ESLint, Mocha, SVG Graphics, Regex Pattern Matching, JSON Configuration, Git/GitHub, CSS/HTML/JavaScript Feature Detection
📦 Installation
From VS Code Marketplace
- Open VS Code
- Go to Extensions (
Ctrl+Shift+X)
- Search for "Crystal-Line Base-Ball"
- Click Install
From Source
git clone https://github.com/ti-chamas/crystal-line-base-ball.git
cd crystal-line-base-ball
npm install
npm run compile
🎮 Usage Examples
CSS Features
/* Grid Layout - Widely supported ✅ */
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
/* CSS Nesting - Limited support ⚠️ */
.card {
background: white;
&:hover {
transform: scale(1.05);
}
}
/* Container Queries - Experimental 🧪 */
@container (min-width: 400px) {
.responsive-element {
font-size: 1.2em;
}
}
HTML Features
<!-- Dialog Element - Widely supported ✅ -->
<dialog open>
<p>This is a dialog</p>
</dialog>
<!-- Popover API - Experimental 🧪 -->
<div popover="auto" id="my-popover">Popover content</div>
JavaScript Features
// Optional Chaining - Widely supported ✅
const value = obj?.property?.nested
// Private Fields - Limited support ⚠️
class MyClass {
#privateField = 'secret'
}
// Temporal API - Experimental 🧪 */
const now = Temporal.Now.instant()
⚙️ Configuration
Use the Command Palette to switch between modes:
Crystal Ball: Gutter Icons Mode - Show only gutter iconsCrystal Ball: Text Decorations Mode - Show only text highlightingCrystal Ball: Both Modes - Show both visualizationsCrystal Ball: Basic Mode - Simple hover informationCrystal Ball: Architecture Mode - Technical architecture detailsCrystal Ball: Support Mode - Browser support informationCrystal Ball: Tips Mode - Developer tips and best practices
🤝 Contributing
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature)
- Commit your changes (
git commit -m 'Add amazing feature')
- Push to the branch (
git push origin feature/amazing-feature)
- Open a Pull Request
📄 License
This project is licensed under the MIT License - see the LICENSE file for details.
🎊 Acknowledgments
- Built for the Baseline Tooling Hackathon
- Inspired by the Baseline web standards initiative
- Thanks to the VS Code extension development community
🔗 Try It Out
Made with 🔮 and ⚾ for the modern web
- Split the editor (
Cmd+\ on macOS or Ctrl+\ on Windows and Linux).
- Toggle preview (
Shift+Cmd+V on macOS or Shift+Ctrl+V on Windows and Linux).
- Press
Ctrl+Space (Windows, Linux, macOS) to see a list of Markdown snippets.
Enjoy!
