Skip to content

Commit

Permalink
CSS support data: order
Browse files Browse the repository at this point in the history
  • Loading branch information
DCoder18 authored and hteumeuleu committed Nov 28, 2024
1 parent b7a83b4 commit 7319b3a
Show file tree
Hide file tree
Showing 2 changed files with 211 additions and 0 deletions.
171 changes: 171 additions & 0 deletions _features/css-order.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,171 @@
---
title: "order"
description: "Specifies the visual order of a flex item relative to other flex items within the same container."
category: css
last_test_date: "2024-10-30"
test_url: "/tests/css-order.html"
test_results_url: "https://testi.at/proj/a5by0geyie73c4jjsg"
stats: {
apple-mail: {
macos: {
"2024-10": "y",
},
ios: {
"2024-10": "y",
}
},
gmail: {
desktop-webmail: {
"2024-10": "n",
},
ios: {
"2024-10": "n",
},
android: {
"2024-10": "n",
},
mobile-webmail: {
"2020-02": "n",
}
},
orange: {
desktop-webmail: {
"2024-10": "u",
},
ios: {
"2024-10": "u"
},
android: {
"2024-10": "u"
}
},
outlook: {
windows: {
"2024-10": "n",
},
windows-mail: {
"2024-10": "n"
},
macos: {
"2024-10": "y",
},
outlook-com: {
"2024-10": "y"
},
ios: {
"2024-10": "y"
},
android: {
"2024-10": "y",
}
},
yahoo: {
desktop-webmail: {
"2024-10": "n",
},
ios: {
"2024-10": "n",
},
android: {
"2024-10": "n"
}
},
aol: {
desktop-webmail: {
"2024-10": "n",
},
ios: {
"2024-10": "n",
},
android: {
"2024-10": "n"
}
},
samsung-email: {
android: {
"2024-10": "n"
}
},
sfr: {
desktop-webmail: {
"2024-10": "u"
},
ios: {
"2024-10": "u"
},
android: {
"2024-10": "u"
}
},
thunderbird: {
macos: {
"2024-10": "y"
}
},
protonmail: {
desktop-webmail: {
"2024-10": "u"
},
ios: {
"2024-10": "u"
},
android: {
"2024-10": "u"
}
},
hey: {
desktop-webmail: {
"2024-10": "u"
}
},
mail-ru: {
desktop-webmail: {
"2024-10": "y"
}
},
fastmail: {
desktop-webmail: {
"2024-10": "u"
}
},
laposte: {
desktop-webmail: {
"2021-08": "u"
}
},
gmx: {
desktop-webmail: {
"2024-10": "n"
},
ios: {
"2024-10": "u"
},
android: {
"2024-10": "u"
}
},
web-de: {
desktop-webmail: {
"2024-10": "n"
},
ios: {
"2024-10": "u"
},
android: {
"2024-10": "u"
}
},
ionos-1and1: {
desktop-webmail: {
"2024-10": "u"
},
android: {
"2024-10": "u"
}
}
}
links: {
"Can I use: CSS order": "https://caniuse.com/?search=order",
"MDN: order": "https://developer.mozilla.org/en-US/docs/Web/CSS/order"
}
---
40 changes: 40 additions & 0 deletions tests/css-order.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
<!DOCTYPE html>
<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="x-apple-disable-message-reformatting">
<!--[if mso]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<title>order</title>
</head>

<body>
<table role="presentation" style="width: 100%; background-color: #f2f2f2; padding: 10px;">
<tr style="display: flex;">
<td style="background-color: #4a9d27; color: #ffffff; padding: 10px; font-size: 14px; margin: 5px; flex: 1; order: 1;">
Item with order 1 (Expected position: 3rd)
</td>

<td style="background-color: #d68c27; color: #ffffff; padding: 10px; font-size: 14px; margin: 5px; flex: 1; order: 0;">
Item with order 0 (Expected position: 2nd)
</td>

<td style="background-color: #d64527; color: #ffffff; padding: 10px; font-size: 14px; margin: 5px; flex: 1; order: -1;">
Item with order -1 (Expected position: 1st)
</td>

<td style="background-color: #5e2d86; color: #ffffff; padding: 10px; font-size: 14px; margin: 5px; flex: 1; order: 999;">
Item with order 999 (Expected position: 4th)
</td>
</tr>
</table>
</body>

</html>

0 comments on commit 7319b3a

Please sign in to comment.