browser support docs

src/pages/_data/docs.yml

@@ -13,6 +13,9 @@ base:
     download:
       title: Download
       url: docs/download.html
+    browser-support:
+      title: Browser Support
+      url: docs/browser-support.html
 
 content:
   title: Content

src/pages/_docs/browser-support.md

@@ -0,0 +1,21 @@
+---
+title: Browser Support
+menu: docs.base.browser-support
+---
+
+As of this latest release, Tabler has launched many new features that may not be compatible with all browsers, especially older ones.
+
+For instance, Tabler no longer uses **vendor prefixes** in styles that are known to have some compatibility issues except for a few parts. Tabler also supports new features such as **CSS grid**, **object fit**, and **sticky positioning** which is not yet supported on all browsers. In short, Tabler supports all the latest supported browsers with **only** partial support for Internet Explorer.
+
+## Supported Browsers
+
+Browser|Version
+---|----------
+<img src="/static/browsers/edge.svg" width="24" height="24" class="me-2" /> Edge|last 3 versions
+<img src="/static/browsers/firefox.svg" width="24" height="24" class="me-2" /> Firefox|last 3 versions, ESR
+<img src="/static/browsers/chrome.svg" width="24" height="24" class="me-2" /> Chrome|last 3 versions
+<img src="/static/browsers/safari.svg" width="24" height="24" class="me-2" /> Safari|last 3 versions
+<img src="/static/browsers/opera.svg" width="24" height="24" class="me-2" /> Opera|last 3 versions
+<img src="/static/browsers/electron.svg" width="24" height="24" class="me-2" /> Electron|last 3 versions
+<img src="/static/browsers/brave.svg" width="24" height="24" class="me-2" /> Brave|last 3 versions
+<img src="/static/browsers/vivaldi.svg" width="24" height="24" class="me-2" /> Vivaldi|last 3 versions

src/static/browsers/brave.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2770 2770"><linearGradient id="a" y1="51%" y2="51%"><stop offset=".4" stop-color="#f50"/><stop offset=".6" stop-color="#ff2000"/></linearGradient><linearGradient id="b" x1="2%" y1="51%" y2="51%"><stop offset="0" stop-color="#ff452a"/><stop offset="1" stop-color="#ff2000"/></linearGradient><path fill="url(#a)" d="M2395 723l60-147-170-176c-92-92-288-38-288-38l-222-252H992L769 363s-196-53-288 37L311 575l60 147-75 218 250 953c52 204 87 283 234 387l457 310c44 27 98 74 147 74s103-47 147-74l457-310c147-104 182-183 234-387l250-953z"/><path fill="#fff" d="M1935 524s287 347 287 420c0 75-36 94-72 133l-215 230c-20 20-63 54-38 113 25 60 60 134 20 210-40 77-110 128-155 120a820 820 0 0 1-190-90c-38-25-160-126-160-165s126-110 150-124c23-16 130-78 132-102s2-30-30-90-88-140-80-192c10-52 100-80 167-105l207-78c16-8 12-15-36-20-48-4-183-22-244-5s-163 43-173 57c-8 14-16 14-7 62l58 315c4 40 12 67-30 77-44 10-117 27-142 27s-99-17-142-27-35-37-30-77c4-40 48-268 57-315 10-48 1-48-7-62-10-14-113-40-174-57-60-17-196 1-244 6-48 4-52 10-36 20l207 77c66 25 158 53 167 105 10 53-47 132-80 192s-32 66-30 90 110 86 132 102c24 15 150 85 150 124s-119 140-159 165a820 820 0 0 1-190 90c-45 8-115-43-156-120-40-76-4-150 20-210 25-60-17-92-38-113l-215-230c-35-37-71-57-71-131s287-420 287-420l273 44c32 0 103-27 168-50 65-20 110-22 110-22s44 0 110 22 136 50 168 50c33 0 275-47 275-47zm-215 1328c18 10 7 32-10 44l-254 198c-20 20-52 50-73 50s-52-30-73-50a13200 13200 0 0 0-255-198c-16-12-27-33-10-44l150-80a870 870 0 0 1 188-73c15 0 110 34 187 73l150 80z"/><path fill="url(#b)" d="M1999 363l-224-253H992L769 363s-196-53-288 37c0 0 260-23 350 123l276 47c32 0 103-27 168-50 65-20 110-22 110-22s44 0 110 22 136 50 168 50c33 0 275-47 275-47 90-146 350-123 350-123-92-92-288-38-288-38"/></svg>

src/static/browsers/chrome.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" viewBox="0 0 190 190"><linearGradient id="d" x1="28.3" x2="80.8" y1="75" y2="44.4" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#a52714" stop-opacity=".6"/><stop offset=".7" stop-color="#a52714" stop-opacity="0"/></linearGradient><linearGradient id="f" x1="109.9" x2="51.5" y1="164.5" y2="130.3" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#055524" stop-opacity=".4"/><stop offset=".3" stop-color="#055524" stop-opacity="0"/></linearGradient><linearGradient id="h" x1="121.9" x2="136.6" y1="49.8" y2="114.1" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ea6100" stop-opacity=".3"/><stop offset=".7" stop-color="#ea6100" stop-opacity="0"/></linearGradient><radialGradient id="a" cx="91.2" cy="55" r="84.1" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#3e2723" stop-opacity=".2"/><stop offset="1" stop-color="#3e2723" stop-opacity="0"/></radialGradient><radialGradient id="i" cx="20.9" cy="47.5" r="78" xlink:href="#a"/><radialGradient id="j" cx="94.8" cy="95.1" r="87.9" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#263238" stop-opacity=".2"/><stop offset="1" stop-color="#263238" stop-opacity="0"/></radialGradient><radialGradient id="k" cx="33.3" cy="31" r="176.8" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff" stop-opacity=".1"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></radialGradient><clipPath id="b"><circle cx="95" cy="95" r="88"/></clipPath><g clip-path="url(#b)"><use fill="#db4437" xlink:href="#c"/><use fill="url(#d)" xlink:href="#c"/><use fill="#0f9d58" xlink:href="#e"/><use fill="url(#f)" xlink:href="#e"/><use fill="#ffcd40" xlink:href="#g"/><use fill="url(#h)" xlink:href="#g"/><g fill-opacity=".1"><path fill="#3e2723" d="M61.3 114.7L21 47.4l39 67.8z"/><path fill="#263238" d="M128.8 116.3l-.8-.4-37.3 67 38.3-67z"/></g><path id="e" d="M7 183h83.8l39-39v-29H60.2L7 23.5z"/><path id="g" d="M95 55l34.6 60L91 183h92V55z"/><path id="c" d="M21 7v108h39.4L95 55h88V7z"/><path fill="url(#a)" d="M95 55v21l78.4-21z"/><path fill="url(#i)" d="M21 47.5l57.2 57.2L60.4 115z"/><path fill="url(#j)" d="M90.8 183l21-78.3 17.8 10.3z"/><circle cx="95" cy="95" r="40" fill="#f1f1f1"/><circle cx="95" cy="95" r="32" fill="#4285f4"/><circle cx="95" cy="95" r="88" fill="url(#k)"/><g fill="#3e2723" fill-opacity=".1"><path fill="#fff" d="M129.6 115a40 40 0 0 1-69.2 0L7 24.5 60.4 116a40 40 0 0 0 69.2 0z"/><path d="M96 55h-.5a40 40 0 1 1 0 80h.5c22 0 40-18 40-40s-18-40-40-40zm-1 127a88 88 0 0 0 88-87.5v.5A88 88 0 0 1 7 95v-.5A88 88 0 0 0 95 182z"/><g fill-opacity=".2"><path fill="#fff" d="M130 116.3a39.3 39.3 0 0 0 3.4-32 38 38 0 0 1-3.8 30.7L92 183l38.2-66.5zM95 8a88 88 0 0 1 88 87.5V95A88 88 0 0 0 7 95v.5A88 88 0 0 1 95 8z"/><path d="M95 54c-22 0-40 18-40 40v1c0-22 18-40 40-40h88v-1z"/></g></g></g></svg>

src/static/browsers/edge.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 27600 27600"><linearGradient id="a" gradientUnits="userSpaceOnUse"/><linearGradient id="b" x1="6870" x2="24704" y1="18705" y2="18705" xlink:href="#a"><stop offset="0" stop-color="#0c59a4"/><stop offset="1" stop-color="#114a8b"/></linearGradient><linearGradient id="e" x1="16272" x2="5133" y1="10968" y2="23102" xlink:href="#a"><stop offset="0" stop-color="#1b9de2"/><stop offset=".16" stop-color="#1595df"/><stop offset=".67" stop-color="#0680d7"/><stop offset="1" stop-color="#0078d4"/></linearGradient><radialGradient id="d" cx="16720" cy="18747" r="9538" xlink:href="#a"><stop offset=".72" stop-opacity="0"/><stop offset=".95" stop-opacity=".53"/><stop offset="1"/></radialGradient><radialGradient id="g" cx="7130" cy="19866" r="14324" gradientTransform="matrix(.14843 -.98892 .79688 .1196 -8759 25542)" xlink:href="#a"><stop offset=".76" stop-opacity="0"/><stop offset=".95" stop-opacity=".5"/><stop offset="1"/></radialGradient><radialGradient id="h" cx="2523" cy="4680" r="20243" gradientTransform="matrix(-.03715 .99931 -2.12836 -.07913 13579 3530)" xlink:href="#a"><stop offset="0" stop-color="#35c1f1"/><stop offset=".11" stop-color="#34c1ed"/><stop offset=".23" stop-color="#2fc2df"/><stop offset=".31" stop-color="#2bc3d2"/><stop offset=".67" stop-color="#36c752"/></radialGradient><radialGradient id="j" cx="24247" cy="7758" r="9734" gradientTransform="matrix(.28109 .95968 -.78353 .22949 24510 -16292)" xlink:href="#a"><stop offset="0" stop-color="#66eb6e"/><stop offset="1" stop-color="#66eb6e" stop-opacity="0"/></radialGradient><path id="c" d="M24105 20053a9345 9345 0 0 1-1053 472 10202 10202 0 0 1-3590 646c-4732 0-8855-3255-8855-7432 0-1175 680-2193 1643-2729-4280 180-5380 4640-5380 7253 0 7387 6810 8137 8276 8137 791 0 1984-230 2704-456l130-44a12834 12834 0 0 0 6660-5282c220-350-168-757-535-565z"/><path id="f" d="M11571 25141a7913 7913 0 0 1-2273-2137 8145 8145 0 0 1-1514-4740 8093 8093 0 0 1 3093-6395 8082 8082 0 0 1 1373-859c312-148 846-414 1554-404a3236 3236 0 0 1 2569 1297 3184 3184 0 0 1 636 1866c0-21 2446-7960-8005-7960-4390 0-8004 4166-8004 7820 0 2319 538 4170 1212 5604a12833 12833 0 0 0 7684 6757 12795 12795 0 0 0 3908 610c1414 0 2774-233 4045-656a7575 7575 0 0 1-6278-803z"/><path id="i" d="M16231 15886c-80 105-330 250-330 566 0 260 170 512 472 723 1438 1003 4149 868 4156 868a5954 5954 0 0 0 3027-839 6147 6147 0 0 0 1133-850 6180 6180 0 0 0 1910-4437c26-2242-796-3732-1133-4392-2120-4141-6694-6525-11668-6525-7011 0-12703 5635-12798 12620 47-3654 3679-6605 7996-6605 350 0 2346 34 4200 1007 1634 858 2490 1894 3086 2921 618 1067 728 2415 728 2952s-271 1333-780 1990z"/><use fill="url(#b)" xlink:href="#c"/><use fill="url(#d)" opacity=".35" xlink:href="#c"/><use fill="url(#e)" xlink:href="#f"/><use fill="url(#g)" opacity=".4" xlink:href="#f"/><use fill="url(#h)" xlink:href="#i"/><use fill="url(#j)" xlink:href="#i"/></svg>

src/static/browsers/electron.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="#47848f" viewBox="0 0 1610 1610"><path d="M603 382c-195-36-349 2-411 108-46 79-33 185 32 297 5 10 18 13 27 7 10-5 13-18 7-27-58-101-69-192-32-257 51-88 189-122 369-89 11 2 21-5 23-16s-4-21-15-23zM326 924a1230 1230 0 0 0 298 235c283 163 584 207 733 106 9-6 11-19 5-28s-19-11-28-5c-133 91-419 49-690-107a1200 1200 0 0 1-289-228 20 20 0 0 0-28-1 20 20 0 0 0-1 28z"/><path d="M1309 900c128-151 172-303 111-409-45-78-141-119-267-121-11 0-20 9-20 20s9 20 20 20c114 1 196 37 233 101 51 88 11 224-107 363a20 20 0 0 0 2 28 20 20 0 0 0 28-2zM981 388a1263 1263 0 0 0-356 141c-293 169-483 418-457 598a21 21 0 0 0 23 17 21 21 0 0 0 17-23c-24-160 157-395 437-557a1228 1228 0 0 1 345-137 20 20 0 0 0 15-24c-3-10-13-17-24-15z"/><path d="M508 1252c67 186 176 301 299 301 90 0 172-61 237-169 6-9 3-22-7-27-9-6-22-3-27 7-58 97-129 149-203 149-102 0-199-102-261-275a20 20 0 0 0-26-12 20 20 0 0 0-12 26zm610-36a1240 1240 0 0 0 53-371c0-331-116-617-281-690-10-4-22 0-26 10s0 22 10 26c147 65 257 336 257 654a1230 1230 0 0 1-51 359 20 20 0 0 0 13 25c10 3 21-3 25-13zm376-20a96 96 0 1 0-192 0 96 96 0 0 0 192 0zm-40 0a56 56 0 1 1-112 0 56 56 0 0 1 112 0zm-1241 96a96 96 0 1 0 0-192 96 96 0 0 0 0 192zm0-40a56 56 0 1 1 0-112 56 56 0 0 1 0 112z"/><path d="M807 252a96 96 0 1 0 0-192 96 96 0 0 0 0 192zm0-40a56 56 0 1 1 0-112 56 56 0 0 1 0 112zm14 701a70 70 0 0 1-82-53 70 70 0 0 1 53-82 70 70 0 0 1 82 53 69 69 0 0 1-53 82z"/></svg>

src/static/browsers/opera.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1090 1090"><linearGradient id="a" x1="461" x2="461" y1="59" y2="1033" gradientUnits="userSpaceOnUse"><stop offset=".6" stop-color="#ff1b2d"/><stop offset="1" stop-color="#a70014"/></linearGradient><linearGradient id="b" x1="714" x2="714" y1="116" y2="978" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#9c0000"/><stop offset=".7" stop-color="#ff4b4b"/></linearGradient><path fill="url(#a)" d="M545 42.5a502.5 502.5 0 1 0 334.9 877.1 362.4 362.4 0 0 1-201.4 61.5c-119.7 0-226.8-59.4-299-153-55.6-65.6-91.5-162.5-94-271.3V533c2.5-108.8 38.4-205.8 94-271.3 72-93.6 179.3-153 299-153 73.6 0 142.5 22.5 201.4 61.6a500.8 500.8 0 0 0-333-127.9h-2z"/><path fill="url(#b)" d="M379.6 261.8c46-54.4 105.7-87.3 170.7-87.3 146.3 0 265 166 265 370.4 0 204.6-118.6 370.4-265 370.4-65 0-124.6-32.8-170.7-87.2 72 93.6 179.2 153 299 153A363 363 0 0 0 880 919.6 501 501 0 0 0 1047.5 545a501.1 501.1 0 0 0-167.6-374.6 362.4 362.4 0 0 0-201.4-61.5c-119.7 0-226.8 59.4-299 153"/></svg>

src/static/browsers/vivaldi.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1900 1900"><path fill="#ef3939" d="M944 1830c386 0 600 0 740-140s140-354 140-740 0-600-140-740S1330 70 944 70s-600 0-740 140S64 564 64 950s0 600 140 740 354 140 740 140z"/><linearGradient id="a" x1="61.24" x2="145.33" y1="37.94" y2="183.58" gradientUnits="userSpaceOnUse"><stop offset="0" stop-opacity=".2"/><stop offset=".79" stop-opacity=".05"/></linearGradient><path fill="url(#a)" d="M151.6 62.4A66 66 0 0 0 30.5 78a65.57 65.57 0 0 0 6.8 50.4c.1.2.2.4.4.6l31 53.8 25.5.2c17.1 0 30.9 0 42.2-1.2 14-1.5 24.1-5 31.9-12.8 11.3-11.3 13.5-27.6 13.9-53.8l-30.6-52.8z" transform="scale(10)"/><path fill="#fff" d="M1407 484a657.9 657.9 0 0 0-932 0 660.9 660.9 0 0 0 0 933 657.9 657.9 0 0 0 932 0 660.9 660.9 0 0 0 0-933zm-39 304l-326 567c-20 35-49 56-90 59-45 3-80-16-103-55L519 786c-42-73 5-162 89-166 44-2 78 18 101 57 31 52 61 105 91 158l66 114c33 55 80 85 144 89 90 5 174-60 185-156 1-7 1-14 2-18 0-31-6-57-19-82-34-68 2-143 75-160 60-13 121 31 129 91 4 27-1 52-14 75z"/></svg>