Before using any CSS framework, developers should be aware of the compatibility of that framework with different browsers like Chrome, Firefox, Safari, etc. The Spectre is supported by all the majorly used browsers which are mentioned below.
- Chrome LAST 4
- Microsoft Edge LAST 4
- Firefox Extended Support Release
- Safari LAST 4
- Opera LAST 4
- Internet Explorer 10+
Note: Spectre supports Internet Explorer 10+, but some HTML5 and CSS3 features are not perfectly supported by Internet Explorer.
Example 1: We test the button class to check the browser support of Spectre.
HTML
<!DOCTYPE html><html>
<head>
<link rel="stylesheet" href=
<link rel="stylesheet" href=
<link rel="stylesheet" href=
</head>
<body>
<center>
<h1 class="text-success">GeeksforGeeks</h1>
<strong>SPECTRE Browsers Support</strong>
<br>
<p>Button color classes</p>
<button class="btn btn-primary">
Primary Color</button>
<button class="btn btn-success">
Success Color</button>
<button class="btn btn-error">
Error Color</button>
</center>
</body>
</html>
|
Output:
Example 2: The following code also demonstrates the spectre classes with browser support.
HTML
<!DOCTYPE html><html>
<head>
<link rel="stylesheet" href=
<link rel="stylesheet" href=
<link rel="stylesheet" href=
</head>
<body>
<center>
<h1 class="text-success">GeeksforGeeks</h1>
<strong>SPECTRE Browsers Support</strong>
<br>
<p>Text color classes are used</p>
<p class="text-primary">
Error Text Color
</p>
<p class="text-success">
Error Text Color
</p>
<p class="text-error">
Error Text Color
</p>
</center>
</body>
</html>
|
Output:
Reference: https://picturepan2.github.io/spectre/getting-started/browsers.html