{"id":1114,"date":"2025-10-01T05:39:15","date_gmt":"2025-09-30T20:39:15","guid":{"rendered":"https:\/\/touhyo.com\/blog\/?p=1114"},"modified":"2025-10-23T23:32:00","modified_gmt":"2025-10-23T14:32:00","slug":"magic-for-old-browsers","status":"publish","type":"post","link":"https:\/\/touhyo.com\/blog\/en\/magic-for-old-browsers\/","title":{"rendered":"Magic for old browsers"},"content":{"rendered":"\n

In the world of the web, new standards are constantly emerging. And because technological development occurs at an astonishing pace, older standards become incompatible and gradually face exclusion.<\/p>\n\n\n\n

To put it simply, it’s like an older smartphone model that can’t be updated to the latest OS. Hasn’t everyone experienced something like product support ending?<\/p>\n\n\n\n

Computers and smartphones have dedicated browser apps for viewing the internet, but there are different types of browsers. These are the icons you launch when browsing pages, such as Safari on iPhone or Chrome on Android.<\/p>\n\n\n\n

For projects where time is limited, specifying “compatible only with the latest browsers” minimizes issues and ensures smooth progress. However, some companies still use older browsers internally for security reasons, so depending on the request, we may need to broaden the compatibility range.<\/p>\n\n\n\n

Not all browsers are built to common standards, requiring individual handling.<\/p>\n\n\n\n

For example, in HTML, conditional comments or CSS hacks. In JavaScript, polyfills are one such example. For reference, I’ll briefly introduce some examples.<\/p>\n\n\n\n

HTML<\/span>
<!--[if IE]><\/span><\/span>\n\t<link rel="stylesheet" type="text\/css" href="ie.css"><\/span><\/span>\n<![endif]--><\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
CSS<\/span>
\/* For IE6 only *\/<\/span><\/span>\n*html<\/span> <\/span>.element<\/span> {<\/span><\/span>\n\t<\/span>color<\/span>: <\/span>red<\/span>;<\/span><\/span>\n}<\/span><\/span>\n<\/span>\n\/* For IE7 only *\/<\/span><\/span>\n*+html<\/span> <\/span>.element<\/span> {<\/span><\/span>\n\t<\/span>color<\/span>: <\/span>blue<\/span>;<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
JavaScript<\/span>
if<\/span> (<\/span>typeof<\/span> Object.create <\/span>!==<\/span> <\/span>"function"<\/span>) {<\/span><\/span>\n\tObject.<\/span>create<\/span> <\/span>=<\/span> <\/span>function<\/span> (<\/span>proto<\/span>) {<\/span><\/span>\n\t\t<\/span>function<\/span> <\/span>F<\/span>() {}<\/span><\/span>\n\t\t<\/span>F<\/span>.prototype <\/span>=<\/span> proto;<\/span><\/span>\n\t\t<\/span>return<\/span> <\/span>new<\/span> <\/span>F<\/span>();<\/span><\/span>\n\t};<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
The following are examples using prefixes enclosed by hyphens.<\/p>\n\n\n\n
CSS<\/span>
.element<\/span> {<\/span><\/span>\n\t<\/span>-webkit-transition<\/span>: <\/span>all<\/span> <\/span>0.3<\/span>s<\/span>;<\/span><\/span>\n\t<\/span>-moz-transition<\/span>: <\/span>all<\/span> <\/span>0.3<\/span>s<\/span>;<\/span><\/span>\n\t<\/span>-ms-transition<\/span>: <\/span>all<\/span> <\/span>0.3<\/span>s<\/span>;<\/span><\/span>\n\t<\/span>transition<\/span>: <\/span>all<\/span> <\/span>0.3<\/span>s<\/span>;<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Next is an example of JavaScript library (jQuery) code.<\/p>\n\n\n\n
JavaScript<\/span>
if<\/span> ($.browser.msie <\/span>&&<\/span> <\/span>parseInt<\/span>($.browser.version) <\/span><=<\/span> <\/span>8<\/span>) {<\/span><\/span>\n\t<\/span>\/\/ Special handling for older Internet Explorer versions (IE8 and below)<\/span><\/span>\n\t<\/span>$<\/span>(<\/span>'body'<\/span>).<\/span>addClass<\/span>(<\/span>'ie8-fix'<\/span>);<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
In browsers, you can force recognition by appending code right before display. That said, fine-tuning support is endless, so generally only the latest browsers are targeted. In reality, the correct approach is to keep writing detailed handling as time permits.<\/p>\n\n\n\n
For any project, a commitment to meticulous craftsmanship may be crucial.<\/p>\n","protected":false},"excerpt":{"rendered":"
In the world of the web, new standards are constantly emerging. And because technological development occurs at an astonishing pace, older standards become incompatible and gradually face exclusion. To put it simply, it’s like an older smartphone model that can’t be updated to the latest OS. Hasn’t everyone experienced something like product support ending? Computers […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_locale":"en_US","_original_post":"https:\/\/touhyo.com\/blog\/?p=1111","footnotes":""},"categories":[1],"tags":[],"class_list":["post-1114","post","type-post","status-publish","format-standard","hentry","category-memo","en-US"],"_links":{"self":[{"href":"https:\/\/touhyo.com\/blog\/wp-json\/wp\/v2\/posts\/1114","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/touhyo.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/touhyo.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/touhyo.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/touhyo.com\/blog\/wp-json\/wp\/v2\/comments?post=1114"}],"version-history":[{"count":7,"href":"https:\/\/touhyo.com\/blog\/wp-json\/wp\/v2\/posts\/1114\/revisions"}],"predecessor-version":[{"id":1374,"href":"https:\/\/touhyo.com\/blog\/wp-json\/wp\/v2\/posts\/1114\/revisions\/1374"}],"wp:attachment":[{"href":"https:\/\/touhyo.com\/blog\/wp-json\/wp\/v2\/media?parent=1114"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/touhyo.com\/blog\/wp-json\/wp\/v2\/categories?post=1114"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/touhyo.com\/blog\/wp-json\/wp\/v2\/tags?post=1114"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}