Mattflaschen has uploaded a new change for review.
https://gerrit.wikimedia.org/r/165161
Change subject: MW UI: Improve IE 6 support for anchors, text and buttons
......................................................................
MW UI: Improve IE 6 support for anchors, text and buttons
The main purpose of this patch is to support all the MW UI semantic
colors (constructive, progressive, destructive) in all modules.
It uses IE 6's compound CSS bug to target it and add extra overrides.
This allows us to deal with modules that have conflicting rules due
to the same compound CSS bug.
All the rules are clearly identified, so when we decide to drop
IE 6 even for no-JS, it's easy to grep and remove these workarounds.
Known limitations:
* It goes from color -> gray on quiet anchor hover, instead of the
other way around (not intentional, and there might be a way to fix
it, but it's not a priority)
* Button text is now black in IE 6. This was the only way I could figure
out to allow colored buttons, anchors, and text while dealing with
modules that conflict due to the compound class problem.
However, the black can be replaced with any color that shows up better
against the four button background colors (including white).
Based on some of Shahyar's ideas from I4d017d0a22cb4f3ca52b6228e45c0463c110ae64
Change-Id: I95f2e7f63bac4555530dc5a4a2ffe08839ff3ed0
---
M resources/src/mediawiki.ui/components/anchors.less
M resources/src/mediawiki.ui/components/buttons.less
M resources/src/mediawiki.ui/components/text.less
3 files changed, 44 insertions(+), 6 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/core
refs/changes/61/165161/1
diff --git a/resources/src/mediawiki.ui/components/anchors.less
b/resources/src/mediawiki.ui/components/anchors.less
index 1a58170..6f5e232 100644
--- a/resources/src/mediawiki.ui/components/anchors.less
+++ b/resources/src/mediawiki.ui/components/anchors.less
@@ -65,3 +65,14 @@
.mixin-mw-ui-anchor-styles( @colorDestructive );
}
}
+
+// IE 6
+// DO NOT USE the select-ie6-only class in your HTML markup!
+//
+// The html part of the selector is a hack to add specificity.
+// See text.less for more explanation.
+html .select-ie6-only.mw-ui-anchor {
+ background: none;
+ border-top: none;
+ border-bottom: none;
+}
diff --git a/resources/src/mediawiki.ui/components/buttons.less
b/resources/src/mediawiki.ui/components/buttons.less
index 01c481d..54b0b85 100644
--- a/resources/src/mediawiki.ui/components/buttons.less
+++ b/resources/src/mediawiki.ui/components/buttons.less
@@ -275,3 +275,17 @@
border-bottom-right-radius: @borderRadius;
}
}
+
+// IE 6
+// DO NOT USE the select-ie6-only class in your HTML markup!
+//
+// Overrides rules that conflict in other modules due to the
+// IE 6 compound class bug.
+//
+// The html part of the selector is a hack to add specificity.
+// See text.less for more explanation.
+html .select-ie6-only.mw-ui-button {
+ // This can be tweaked; it should show up well against all four
+ // (including white) button background colors.
+ color: #000;
+}
diff --git a/resources/src/mediawiki.ui/components/text.less
b/resources/src/mediawiki.ui/components/text.less
index 500d42c..666fcf5 100644
--- a/resources/src/mediawiki.ui/components/text.less
+++ b/resources/src/mediawiki.ui/components/text.less
@@ -26,15 +26,28 @@
*/
.mw-ui-text {
- // The selector order is like this on purpose; IE6 ignores the second
selector,
- // so we don't want to accidentally apply this color on all
mw-ui-CONTEXT classes
- .mw-ui-progressive& {
+ // The selector order is like this on purpose; IE 6 only considers the
last selector
+ // and we don't want all mw-ui-text to have the same color in IE 6.
+ &.mw-ui-progressive {
color: @colorProgressive;
}
- .mw-ui-constructive& {
+ &.mw-ui-constructive {
color: @colorConstructive;
}
- .mw-ui-destructive& {
+ &.mw-ui-destructive {
color: @colorDestructive;
}
-}
\ No newline at end of file
+}
+
+// DO NOT USE the select-ie6-only class in your HTML markup!
+// IE 6 does not support compound selectors. We take advantage of that
+// bug to reset certain styles from other modules
+// (e.g. mediawiki.ui.button). which take effect on mw-ui-text elements
+// due to the same bug.
+//
+// This will never match in compliant browsers.
+.select-ie6-only.mw-ui-text {
+ background: none;
+ border-top: none;
+ border-bottom: none;
+}
--
To view, visit https://gerrit.wikimedia.org/r/165161
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I95f2e7f63bac4555530dc5a4a2ffe08839ff3ed0
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/core
Gerrit-Branch: master
Gerrit-Owner: Mattflaschen <mflasc...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
