forked from Jonesy/Safari-Clone
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
111 lines (109 loc) · 6.45 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!--
Author: Joshua Jones
Company: The General Metrics Web Development Company
Date: March 2010
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="Joshua R. Jones">
<title>Safari</title>
<link rel="stylesheet" href="css/safari.css" type="text/css">
<link rel="stylesheet" href="css/dock.css" type="text/css">
<link rel="stylesheet" href="css/menubar.css" type="text/css">
</head>
<body>
<div class="menubar">
<ul>
<li></li>
<li>Safari</li>
<li>File</li>
<li>Edit</li>
<li>View</li>
<li>History</li>
<li>Bookmarks</li>
<li>Window</li>
<li>Help</li>
<ul>
</div>
<div class="browser">
<div class="chrome">
<div class="window-controls">
<div class="close-window"><span>x</span></div>
<div class="minimize-window"><span>-</span></div>
<div class="expand-window"><span>+</span></div>
</div>
<div class="window-title">Safari</div>
<div class="interface">
<div class="back-forward">
<div class="button-back button">
<span>▲</span>
</div>
<div class="button-forward button disabled">
<span>▲</span>
</div>
</div>
<div class="bookmark button">+</div>
<input type="text" class="url" value="http://localhost/">
<div class="reload">↻</div>
<input type="search" results="5" placeholder="Google">
<div class="bookmarks-bar">
<ul>
<li><a href="http://general-metrics.com/">General Metrics</a></li>
<li><a href="http://twitter.com/g_metrics">Twitter</a></li>
<li><a href="http://github.com/Jonesy/Safari-Clone">Source on Github</a></li>
</ul>
</div>
</div>
</div>
<div class="viewport">
<h1>A good browser should be able to reproduce itself.</h1>
<h3>This is Safari 4 built entirely with HTML and CSS3. No images used.</h3>
<small>(Only works in Webkit Mac-based browsers, of course)</small>
<p>Being a web developer who works on a Mac, I've noticed that Apple's implementation of CSS3 to Webkit and Safari always felt like they were extending OS X GUI elements to the web, even going so far as to make the <a href="http://willnorris.com/2009/09/itunes-9-now-with-more-webkit" title="iTunes 9, now with more WebKit - Will Norris">iTunes store mostly out of Webkit</a>. With that in mind and being inspired by <a href="http://desandro.com/articles/opera-logo-css/" title="Opera Logo with CSS - David DeSandro">David DeSandro's Opera Logo made in CSS</a>, I decided to take on Safari itself. I did so with the following in mind:</p>
<ol>
<li>Only CSS</li>
<li>No images</li>
<li>No JavaScript</li>
<li>No Canvas</li>
</ol>
<p>With those limits there of course were some features of Safari's default state that didn't make the cut for now — most obviously the tabs and various icons. I also didn't take any steps to make this experiment work in any other browser (it does work in Chrome for Mac however). Eventually I'd like to perform the same experiment with FireFox 3.6, and perhaps others down the road if CSS3 advancements become available.</p>
<h3>Some notes:</h3>
<ul>
<li>The most surprising part was being able to recreate with little effort the Aqua window buttons with multiple CSS gradient backgrounds. I ended up having to add an extra <code><span></code> element so I could get the bevel in cleanly, but I almost could of got away with just one <code><div></code>.</li>
<li>I chose to go with <code><input type="search"></code> over styling a text input with <code>-webkit-border-radius</code> over styling a text input with -webkit-border-radius (which looks too jagged). Con is that the border colour is slightly off, but pro is it looks nicer and we gain the magnifying glass icon for free (keeping with the no images rule).</li>
<li>I went with fonts over skewed and rotated <code><div></code>'s for the button labels, but with an extra bit of work I could switch them over in order to lose some of the fuzziness that comes with Safari's font anti-aliasing.</li>
<li>In the spirit of making the browser with no additional images, I opted to keep the Address Bar globe out, as well as the Refresh button, but with little work they can be slotted in. The source is available on <a href="http://github.com/Jonesy/Safari-Clone">Github</a>, and if anyone wants to take on making the browser actually work, have at it!</li>
</ul>
<p>Next up: Mobile Safari.</p>
</div>
</div>
<div id='dock' style='left:50%'>
<div style='margin-left:-50%;width:50%;left:50%;'>
<div class='plate'>
<div class='surface'></div>
<div style='height:1px;background-color:#444;'></div>
<div style='height:2px;background-color:white;opacity:.7'></div>
</div>
<div>
<ul class='items'>
<li class='icon'><a href='#'><img src='img/Finder-128.png'></a><div class='label'><div><span>Finder</span></div></div><div class='dot'></div></li>
<li class='icon active'><a href='#'><img src='img/Safari-128.png'></a><div class='label'><div><span>Safari</span></div></div><div class='dot'></div></li>
<li class='icon'><a href='#'><img src='img/iChat-128.png'></a><div class='label'><div><span>iChat</span></div></div><div class='dot'></div></li>
<li class='icon'><a href='#'><img src='img/Mail-128.png'></a><div class='label'><div><span>Mail</span></div></div><div class='dot'></div></li>
<li class='icon'><a href='#'><img src='img/Address Book-128.png'></a><div class='label'><div><span>Address Book</span></div></div><div class='dot'></div></li>
<li class='icon'><a href='#'><img src='img/iCal-128.png'></a><div class='label'><div><span>iCal</span></div></div><div class='dot'></div></li>
<li class='icon'><a href='#'><img src='img/Terminal-128.png'></a><div class='label'><div><span>Terminal</span></div></div><div class='dot'></div></li>
</ul>
<div class='separator'><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<ul class='items'>
<li class='icon'><a href='#'><img src='img/ApplicationsFolder-128.png'></a><div class='label'><div><span>Applications</span></div></div></li>
<li class='icon'><a href='#'><img src='img/DocumentsFolder-128.png'></a><div class='label'><div><span>Documents</span></div></div></li>
<li class='icon'><a href='#'><img src='img/Trash-128.png'></a><div class='label'><div><span>Trash</span></div></div></li>
</ul>
</div>
</div>
</div>
</body>
</html>