This repository has been archived by the owner on Dec 31, 2017. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 7
/
README
73 lines (61 loc) · 3.16 KB
/
README
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
RoundRect
Based on DD_roundies, but totally rearchitected to be less confusing, more
maintainable, and more feature-filled, this library adds support for the CSS3
border-radius property in IE7 and 8, but without ANY configuration required.
Rules are read directly from your stylesheets, so unlike other libraries, you
*do not* need to redefine your border-radius styles within JavaScript. Just
RoundRect.run() and you’ve got rounded rectangles!
Features:
* A svelte 4.9kB once minified + gzipped
* No dependencies on external libraries
* Functions even if you are using an evil library that modifies
Object.prototype (you know who you are)
* Properly object-oriented; no C masquerading as JavaScript here
* 100% configuration-free border-radius support
* Supports dynamically updating backgrounds and borders, without using polling
* Supports :hover and :focus pseudo-elements (for versions of IE with native
support for these pseudo-elements)
* Supports input and textarea elements, and even drop-downs in IE8
* Functions properly in IE7 and IE8 strict mode
* (Almost) readable code with (nearly) complete jsdoc documentation
* No memory leaks!
Caveats:
* Only pixel units are supported for padding, border-width, and border-radius.
Anything else will be assumed to be pixel width, even if it isn’t.
You’ve been warned.
* Dynamic updates are about as responsive as a rock star in a drug-induced coma
in IE8; in IE7, more like a 90-year-old missing their hearing aids.
* Sometimes, elements aren’t properly redrawn when a change causes several
different elements to be restyled simultaneously (like, say, switching tabs.
What a bunch of crap.)
* hasLayout is required, so it might break your design when rounded elements
(and their parents) are surprised with the gift of layout
* Mouse events like mouseover, mouseenter, mousemove will start behaving
erattically when the mouse moves over a rounded element. More specifically,
hovering over an area of a rounded element that does not contain a child
element will result in the mouse basically falling through the layer into
VML’s cold, dead arms. There is a workaround in the code to try to mitigate
this issue but it does not work 100% of the time.
* Could it support more of CSS3 backgrounds and borders, like, perhaps,
rgba backgrounds? HECK YES IT COULD, TOTALLY! …but it doesn’t right now.
Usage:
1. Load the script. You should really use conditional comments and only load
for your lovely IE visitors, but it will work even if you forget.
2. Call RoundRect.run().
3. Have a beer. You did a great job!
Advanced usage:
1. Load the script. You should really use conditional comments and only load
for your lovely IE visitors, but it will work even if you forget.
2. var roundrect = RoundRect.create(element, dynamic);
3. roundrect.destroy(); // restores the original glint and shine of your html
// one you decide that this web 2.0 thing kinda sucks and round rectangles
// are lame and outdated.
//
// (in theory.)
//
//
// …
// (it hasn’t really been tested yet.)
4. Have two beers. You did twice the work, you totally deserve that extra one!
Documentation:
jsdoc in the source code! Go read it!