Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

Commit 3660a32

Browse files
Splaktarjosephperrott
Splaktar
authored and
josephperrott
committed
fix(css): remove bloat from autoprefixing of unsupported browsers (#11340)
1 parent 3ef9a02 commit 3660a32

File tree

6 files changed

+325
-19
lines changed

6 files changed

+325
-19
lines changed

‎README.md

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,15 @@ Quick Links:
1818
* [Installing](#installing)
1919

2020

21-
Please note that using AngularJS Material requires the use of **[AngularJS](https://angularjs.org/) 1.4.x** or higher.
22-
AngularJS Material is targeted for the browser versions shown below in the green boxes:
21+
Please note that using AngularJS Material requires the use of **[AngularJS](https://angularjs.org/)
22+
1.4.x** or higher.
2323

24-
![ngm1_browser_support](https://user-images.githubusercontent.com/3506071/35176284-1419c42c-fd46-11e7-9381-d93e5c5db39a.png)
24+
AngularJS Material is targeted for the browser versions defined in the `broswerslist` field
25+
of our [package.json](package.json). Below is an screenshot from
26+
[browserl.ist](http://browserl.ist/?q=%3E+0.5%25%2C+last+2+versions%2C+Firefox+ESR%2C+not+ie+%3C%3D+10%2C+not+ie_mob+%3C%3D+10%2C+not+bb+%3C%3D+10%2C+not+op_mob+%3C%3D+12.1)
27+
that provides a visual representation of this configuration:
28+
29+
![AngularJS Material Browser Support](https://user-images.githubusercontent.com/3506071/41875080-d3096d7a-7897-11e8-8838-2bf7473c9502.png)
2530

2631
## <a name="demos"></a> Online Documentation and Demos
2732

‎docs/app/css/style.css

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -884,6 +884,66 @@ table.md-css-table td p {
884884
padding-bottom: 10px;
885885
}
886886

887+
table.custom-table {
888+
margin: 24px 2px;
889+
box-shadow: 0 1px 2px rgba(10, 16, 20, 0.24), 0 0 2px rgba(10, 16, 20, 0.12);
890+
border-radius: 2px;
891+
background: #fafafa;
892+
border-spacing: 0;
893+
}
894+
table.custom-table thead > {
895+
vertical-align: middle;
896+
border-color: inherit;
897+
}
898+
table.custom-table thead > tr {
899+
vertical-align: inherit;
900+
border-color: inherit;
901+
}
902+
table.custom-table thead > tr > th {
903+
background: rgba(219, 219, 219, 0.2);
904+
border-bottom: 1px solid #dbdbdb;
905+
color: #333;
906+
font-size: 12px;
907+
font-weight: 500;
908+
padding: 8px 24px;
909+
text-align: left;
910+
text-transform: uppercase;
911+
line-height: 28px;
912+
}
913+
table.custom-table tbody > tr > th,
914+
table.custom-table tbody > tr > td {
915+
border-bottom: 1px solid #dbdbdb;
916+
padding: 16px;
917+
text-align: left;
918+
line-height: 24px;
919+
vertical-align: top;
920+
}
921+
@media (max-width: 480px) {
922+
table.custom-table tbody > tr > th:before,
923+
table.custom-table tbody > tr > td:before {
924+
display: inline-block;
925+
}
926+
}
927+
table.custom-table tbody > tr > td {
928+
letter-spacing: 0.3px;
929+
}
930+
@media (max-width: 480px) {
931+
table.custom-table tbody > tr > td tr td:first-child {
932+
background-color: #dbdbdb;
933+
}
934+
}
935+
table.custom-table tbody > tr > th:first-child {
936+
border-right: 1px solid #dbdbdb;
937+
}
938+
table.custom-table tbody > tr > th {
939+
background: rgba(219, 219, 219, 0.2);
940+
font-weight: 600;
941+
max-width: 100px;
942+
}
943+
table.custom-table tbody > tr >:last-child td {
944+
border: none;
945+
}
946+
887947
/* Provide some layout/padding enhancements for mobile/small devices */
888948
@media(max-width: 500px) {
889949
/* Reduce the size of the nav logo/header */

‎docs/app/partials/home.tmpl.html

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,103 @@ <h2 class="md-headline">AngularJS versus Angular?</h2>
5959
</li>
6060
</ul>
6161

62+
<h2 class="md-headline">Browser Support</h2>
63+
<p>
64+
AngularJS Material generally supports browsers that fall into these categories
65+
</p>
66+
<ul>
67+
<li>Greater than 0.5% global usage</li>
68+
<li>Last two versions of Evergreen browsers</li>
69+
<li>Firefox ESR</li>
70+
<li>Not considered "dead" browsers</li>
71+
</ul>
72+
<br/>
73+
<h3>The following table provides a more detailed view:</h3>
74+
<table class="custom-table">
75+
<tbody>
76+
<tr>
77+
<th>
78+
Browser
79+
</th>
80+
<th>
81+
Supported Versions
82+
</th>
83+
</tr>
84+
<tr>
85+
<td>
86+
Chrome<br/>Chrome for Android<br/>Edge<br/>Opera
87+
</td>
88+
<td>
89+
last 2 versions
90+
</td>
91+
</tr>
92+
<tr>
93+
<td>
94+
Firefox
95+
</td>
96+
<td>
97+
last 2 versions<br/>ESR
98+
</td>
99+
</tr>
100+
<tr>
101+
<td>
102+
IE<br/>IE Mobile
103+
</td>
104+
<td>
105+
11
106+
</td>
107+
</tr>
108+
<tr>
109+
<td>
110+
Safari
111+
</td>
112+
<td>
113+
11<br>11.1
114+
</td>
115+
</tr>
116+
<tr>
117+
<td>
118+
iOS
119+
</td>
120+
<td>
121+
10.3<br>11.0-11.2<br>11.3
122+
</td>
123+
</tr>
124+
<tr>
125+
<td>
126+
Firefox for Android<br/>UC<br/>QQ<br/>Baidu
127+
</td>
128+
<td>
129+
latest version
130+
</td>
131+
</tr>
132+
<tr>
133+
<td>
134+
Android Browser
135+
</td>
136+
<td>
137+
4.4<br>4.4.3-4.4.4<br>latest version
138+
</td>
139+
</tr>
140+
<tr>
141+
<td>
142+
Samsung Internet
143+
</td>
144+
<td>
145+
4<br>5<br>6.2
146+
</td>
147+
</tr>
148+
<tr>
149+
<td>
150+
Opera for Android
151+
</td>
152+
<td>
153+
Mini all<br>Mobile 37
154+
</td>
155+
</tr>
156+
</tbody>
157+
</table>
158+
62159
<md-divider></md-divider>
63160

64161
<br/>

‎package-lock.json

Lines changed: 143 additions & 6 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@
4242
"glob": "~7.0.5",
4343
"gulp": "^3.9.1",
4444
"gulp-add-src": "^0.2.0",
45-
"gulp-autoprefixer": "^3.1.0",
45+
"gulp-autoprefixer": "^5.0.0",
4646
"gulp-concat": "^2.2.0",
4747
"gulp-connect": "^4.1.0",
4848
"gulp-cssnano": "^2.1.2",
@@ -88,5 +88,14 @@
8888
"test:fast": "gulp karma-fast",
8989
"test:full": "gulp karma",
9090
"lint": "eslint ."
91-
}
91+
},
92+
"browserslist": [
93+
"> 0.5%",
94+
"last 2 versions",
95+
"Firefox ESR",
96+
"not ie <= 10",
97+
"not ie_mob <= 10",
98+
"not bb <= 10",
99+
"not op_mob <= 12.1"
100+
]
92101
}

0 commit comments

Comments
 (0)