-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
146 lines (128 loc) · 5.2 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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Corner Rounding Example</title>
<meta charset="utf-8" />
<style>
body>code {
display: block;
padding: 1em 0 1em 1em;
border-left: solid 1px #ccc;
margin: 1em 0 1em 2em;
white-space: pre;
}
img,
.rounder {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 0 5px 2px rgba(0,0,0,.5);
-moz-box-shadow: 0 0 5px 2px rgba(0,0,0,.5);
box-shadow: 0 0 5px 2px rgba(0,0,0,.5);
}
</style>
<!--[if lt IE 9]>
<style>
.rounder {
behavior: url(/css/PIE.htc);
}
</style>
<![endif]-->
</head>
<body>
<h1>Corner Rounding for IE and Mozilla</h1>
<h2>The Situation</h2>
<p>Firefox has supported rounded corners with CSS for a while. First with the vendor extension <code>-moz-border-radius</code>, and now with the specification <code>border-radius</code>. The problem is it doesn't work on images (<img> elements). This has been fixed in Gecko 2.0b7. Right now the current Firefox beta is using Gecko 2.0b6.</p>
<p>In a slightly less-than perfect world we could wrap out images in <div> tags and round the corners on those. Let's do that. (We'll be using jQuery by the way, because I love it.)
</p>
<code>
$('img').wrap('<div class="rounder" />');
</code>
<p>Sadly, that doesn't seem to work in Firefox any better than rounding the images directly.
</p>
<p>We know rounding background images works, so we need to get our inline images to become background images.
</p>
<code>
$('.rounder').each(function(i,e){
$(e).css('backgroundImage','url('+$(e).children('img').attr('src')+')');
$(e).children('img').remove();
});
</code>
<p>Let's toss all of that in a function.
</p>
<code>
function round_corners(){
$('img').wrap('<div class="rounder" />');
$('.rounder').each(function(i,e){
$(e).css('backgroundImage','url('+$(e).children('img').attr('src')+')');
$(e).children('img').remove();
});
}
</code>
<p>We can call that from wherever, and as an added bonus, we can make IE do it too<sup>*</sup>
<p>So we have a work around, but once the browser supports it natively, we want to let that happen. Since we know when the support is being added, we can check the user agent string for the right version:
</p>
<code>
if($browser.mozilla && $.browser.version.match(/^(1|(2\.0b[0-6]))/)){
round_corners();
}
</code>
<p>Bonus: we can use this to improve things in IE8 as well!</p>
<p>IE8 does not do <code>border-radius</code>, however you can make use of something useful like <a href="http://www.css3pie.com">PIE</a> to round corners. PIE is limited in the same way as Firefox in regard to rounding corners on <img> tags. So we can toss our handy function inside an IE conditional comment targetting versions older than IE9 (becuase IE9 does do rounded corners on <img> tags).
</p>
<p><strong>Update:</strong> The awesome people working on PIE have <a href="https://github.com/lojjic/PIE/commit/b392f432797b1efaaabff522ca856f0113319ce3">fixed this issue</a> for an upcoming release. Now you should only need to use this javascript technique in Mozilla!</p>
<code>
<!--[if lt IE 9]>
<script>
round_corners();
</script>
<![endif]-->
</code>
<h2>All together now</h2>
<code>
<script>
function round_corners(){
$('img').wrap('<div class="rounder" />');
$('.rounder').each(function(i,e){
$(e).css('backgroundImage','url('+$(e).children('img').attr('src')+')');
$(e).children('img').remove();
});
}
if($browser.mozilla && $.browser.version.match(/^(1|(2\.0b[0-6]))/)){
round_corners();
}
</script>
<!--[if lt IE 9]>
<script>
round_corners();
</script>
<![endif]-->
</code>
<p>All you need to do is make sure you replace 'img' with whatever selector you want to replace (unless you want to replace every single image). Also, make sure in your CSS you add the <code>.rounder</code> selector to any rules that would round the corners on an image.
</p>
<h2>Caveat</h2>
<p>If you replace an image which is being scaled down in the markup, or with CSS, it may display off center, or cut off, or otherwise not quite right as a background image.</p>
<h2>Example</h2>
<img src="./stones.jpg" alt="">
<p>See this in action on <a href="http://www.grace.edu/about" title="About Grace">http://www.grace.edu/about</a>.
</p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
function round_corners(){
$('img').wrap('<div class="rounder" />');
$('.rounder').each(function(i,e){
$(e).css('backgroundImage','url('+$(e).children('img').attr('src')+')');
$(e).children('img').remove();
});
}
if($browser.mozilla && $.browser.version.match(/^(1|(2\.0b[0-6]))/)){
round_corners();
}
</script>
<!--[if lt IE 9]>
<script>
round_corners();
</script>
<![endif]-->
</body>
</html>