Web Browsers based entirely on CSS without images.
MIT License
Web Browsers based entirely on CSS without images.
Custom browser styles for Firefox, Safari (coming soon), Edge (coming soon), Chrome, and Internet Explorer.
Version: v0.02 Released: 2015-08-21
Hosted at GitHub; browse at: https://github.com/SamKirkland/CSS-Web-Browsers
Copy the contents of css/ to the css asset directory in your project. ``* (optionally) use scss and compile it after changing variables to meet your needs.
Include the required CSS into your document:
<link rel="stylesheet" type="text/css" href="css/normalize.min.css" />
<link rel="stylesheet" type="text/css" href="css/cssWebBrowsers.min.css" />
<div class="miniBrowser">
<div class="miniBrowserHeader">
<ul>
<li class="close"></li>
<li class="minimize"></li>
<li class="expand"></li>
<li class="tab activeTab firstTab">Tab 1</li>
<li class="tab">Tab 2</li>
<li class="newTab">+</li>
</ul>
<div class="miniBrowserToolBar">
<div class="miniBrowserBack"></div>
<div class="miniBrowserForward"></div>
<div class="refresh"></div>
<div class="home"></div>
<div class="miniBrowserURL https">
<div></div><input type="text" spellcheck="false" value="https://samkirkland.com/">
</div>
<div class="menu"></div>
</div>
</div>
<div class="miniBrowserContent">
Place Content Here
</div>
</div>
Customize the HTML or add a browser specific class to the root element:
* .firefox
* .safari (coming soon)
* .edge (coming soon)
* .chrome
``* .ie
(Optional) Add Javascript to autodetect the users current browser and style the default browser to match their current web browser:
/* This wont work all the time, but its good enough */
function detectBrowser() {
var browser = "";
var userAgent = navigator.userAgent.toLowerCase();
// is internet explorer
if (userAgent.indexOf('msie') > -1 || userAgent.indexOf('edge') > -1 || userAgent.indexOf('trident') > -1) { browser = "ie"; }
// is firefox
else if (userAgent.indexOf('firefox') > -1) { browser = "firefox"; }
// is chrome
else if (userAgent.indexOf('chrome') > -1) { browser = "chrome"; }
// is safari
else if (userAgent.indexOf('safari') > -1) { browser = "safari"; }
return browser;
}
// waits for the DOM to finish loading
document.addEventListener("DOMContentLoaded", function(event) {
// adds the current browser class to the first occurance of .miniBrowser
document.getElementsByClassName("miniBrowser")[0].className = "miniBrowser " + detectBrowser();
});
Copyright 2015 Sam Kirkland (mailto:[email protected]) Released under The MIT License.