From 8e0509e3459d1e49a8812cfaf88d48cb2b09a9b9 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 10 Jun 2014 14:45:52 -0700 Subject: [PATCH 1/6] custom progress element --- _includes/progress-ie9.html | 7 ++++ _includes/progress.html | 12 ++++++ index.md | 36 +++++++++++++++++ wtf-forms.css | 77 ++++++++++++++++++++++++++++++++++++- 4 files changed, 130 insertions(+), 2 deletions(-) create mode 100644 _includes/progress-ie9.html create mode 100644 _includes/progress.html diff --git a/_includes/progress-ie9.html b/_includes/progress-ie9.html new file mode 100644 index 0000000..6014e34 --- /dev/null +++ b/_includes/progress-ie9.html @@ -0,0 +1,7 @@ + +
+ + 25% + +
+ \ No newline at end of file diff --git a/_includes/progress.html b/_includes/progress.html new file mode 100644 index 0000000..b532fd1 --- /dev/null +++ b/_includes/progress.html @@ -0,0 +1,12 @@ + + 25% + + + 50% + + + 75% + + + 100% + diff --git a/index.md b/index.md index 3f84a7c..6b2bc8b 100644 --- a/index.md +++ b/index.md @@ -99,6 +99,42 @@ In other words, it's an entirely custom element, all generated via CSS. **Heads up!** The custom file input is currently unable to update the *Choose file...* text with the filename. Without JavaScript, this might not be possible to change, but I'm open to ideas. +### Progress + +
+ {% include progress.html %} +
+```html +{% include progress.html %} +``` + +The `` element is actually pretty straightforward to style, but it does have some gotchas. Here's the deal: + +* Unlike most other custom inputs, we don't wrap it in an extra element. We just add `.progress`. +* Using pseudo selectors, we target aspects of the `` element. For example, in WebKit browsers, `::-webkit-progress-bar` is the background bar and `::-webkit-progress-value` is the colored progress bar within. +* Firefox has it's own pseudo selectors that must be applied with duplicate rulesets. Chaining `::-webkit-` and `::-moz-` pseudo selectors will nullify your styles. (It's worth noting this happens with other pseudo selectors like `placeholder`). +* IE10 is the only version of IE to support ``. The only quirk there is that you must set the `color` property on the `` element to colorize the progress bar within. + +For more information, [read the rather thorough CSS Tricks article](http://css-tricks.com/html5-progress-element/). There you'll find gotchas around generated content, browser quirks, and more. The MDN also has an informative [article on the progress element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress). + +#### IE9 support + +
+ {% include progress-ie9.html %} +
+```html +{% include progress-ie9.html %} +``` + +IE10 natively supports the `` element, but IE9 doesn't. Instead, they simply show as plain text values. However, IE9 support is just a few hacks away: + +* We add custom markup *within* the existing `` element to simulate the background and inner progress bar. +* We copy-paste the styles from the pseudo selectors to a IE9-specific media query (like I said, a few hacks) to only apply when necessary. +* Lastly, to simulate the native `` behavior, we add `text-indent: -999rem;` to the custom `.progress-bar` to hide the text value. + +**Once applied, you can use the IE9-compatible snippet in all browsers.** However, I encourage you to only do so should you need IE9 support. + + ### FAQs #### What about every other form control? diff --git a/wtf-forms.css b/wtf-forms.css index 160d26e..f105466 100644 --- a/wtf-forms.css +++ b/wtf-forms.css @@ -268,6 +268,77 @@ +/* + * Progress + */ + +.progress { + display: inline-block; + width: 100%; + height: 1rem; +} +.progress[value] { + /* Reset the default appearance */ + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + /* Remove Firefox and Opera border */ + border: 0; + /* IE10 uses `color` to set the bar background-color */ + color: #0074d9; +} +.progress[value]::-webkit-progress-bar { + background-color: #eee; + border-radius: .2rem; +} +.progress[value]::-webkit-progress-value { + background-color: #0074d9; + border-top-left-radius: .2rem; + border-bottom-left-radius: .2rem; +} +.progress[value="100"]::-webkit-progress-value { + border-top-right-radius: .2rem; + border-bottom-right-radius: .2rem; +} + +/* Firefox styles must be entirely separate or it busts Webkit styles. */ +@-moz-document url-prefix() { + .progress[value] { + background-color: #eee; + border-radius: .2rem; + } + .progress[value]::-moz-progress-bar { + background-color: #0074d9; + border-top-left-radius: .2rem; + border-bottom-left-radius: .2rem; + } + .progress[value="100"]::-moz-progress-bar { + border-top-right-radius: .2rem; + border-bottom-right-radius: .2rem; + } +} + +/* IE9 hacks to accompany custom markup. We don't need to scope this via media queries, but I feel better doing it anyway. */ +@media screen and (min-width:0\0) { + .progress { + background-color: #eee; + border-radius: .2rem; + } + .progress-bar { + display: inline-block; + height: 1rem; + text-indent: -999rem; /* Simular hiding of value as in native `` */ + background-color: #0074d9; + border-top-left-radius: .2rem; + border-bottom-left-radius: .2rem; + } + .progress[width="100%"] { + border-top-right-radius: .2rem; + border-bottom-right-radius: .2rem; + } +} + + /* * Control layouts */ @@ -275,10 +346,12 @@ .controls-stacked { margin: 1rem 0; } -.controls-stacked .control { +.controls-stacked .control, +.controls-stacked .progress { display: block; } -.controls-stacked .control + .control { +.controls-stacked .control + .control, +.controls-stacked .progress + .progress { margin-top: .5rem; } From e874154ff0c5c0e4c371f0b3e4170e9769e00f45 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 10 Jun 2014 15:09:44 -0700 Subject: [PATCH 2/6] new line life --- _includes/progress-ie9.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_includes/progress-ie9.html b/_includes/progress-ie9.html index 6014e34..f4dbcc2 100644 --- a/_includes/progress-ie9.html +++ b/_includes/progress-ie9.html @@ -4,4 +4,4 @@ 25% - \ No newline at end of file + From 8c7b434310ccd9ddf736ee88845022af14e6bf10 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 10 Jun 2014 16:19:35 -0700 Subject: [PATCH 3/6] fix paths for other pages --- _layouts/default.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/_layouts/default.html b/_layouts/default.html index 4f39f37..aea1560 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -10,8 +10,8 @@ {{ site.name }} - - + +