JavaScriptでのCSSの操作が上手くいきません

できるだけ全てのデバイスやブラウザーに対応するようにウェブサイトの制作に挑戦しているところです。
現在、platform.jを使ってOSとブラウザーを判定して、Windowsで開かれたSafariでは独自のCSSを適用するということを行おうとしています。適用しようとしているWindows版Safariのバージョンはv.5.1.7です。
しかし、書いたCSSの通りにHTMLが装飾されません。
こちらのページを参考に、以下のように記述して実行してみましたが、結果は何も変わらないといった感じです。

JavaScript
1//index8.js
2
3var browser = platform.name;
4var os = platform.os;
5
6os = os.toString();
7os = os.substr(0, 7);
8
9var title = document.getElementsByTagName('h1');
10
11if ( browser == "Safari" && os == "Windows" ) {
12  title.style.fontSize = "16px";
13  title.style.color = "red";
14} else {
15  console.log("CSSの書き換えはなし");
16}
17

JavaScript
1//index8.js
2
3var browser = platform.name;
4var os = platform.os;
5
6os = os.toString();
7os = os.substr(0, 7);
8
9var title = document.getElementsByTagName('h1');
10
11if ( browser == "Safari" && os == "Windows" ) {
12  for ( i = 0; i < title.length; i++ ) {
13  　title.style.fontSize = "16px";
14    title[i].style.color = "red";
15  }
16} else {
17  console.log("CSSの書き換えはなし");
18}
19

HTMLファイルでは下記のようにjsファイルを読み込んでいます。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6    <title>タイトル</title>
7    <link rel="stylesheet" href="css/bootstrap.css">
8    <link rel="stylesheet" href="css/stylesheet8.css">
9    <script src="js/jquery-3.4.1.js" charset="utf-8"></script>
10    <script src="platform.js" charset="utf-8"></script>
11    <script src="js/index8.js" charset="utf-8"></script>
12  </head>
13  <body>
14    <div class="container-fluid m-0 p-0">
15      <!-- ヘッダー部分 -->
16      <div class="row header w-100 m-0 p-0">
17        <div class="col-xs-6 w-50 h-100">
18          <a href="#"><img src="img/company_logotype.png" alt="" class="h-100 w-auto"></a>
19        </div>
20        <div class="col-xs-6 w-50 h-100">
21          <div class="menu float-right h-100">
22            <span></span><span></span><span></span>
23          </div>
24        </div>
25      </div>
26      <!-- お知らせ -->
27      <div class="row w-100 m-0 p-0">
28        <div class="col-xs-6 News w-50">
29          <h2 style="color:white;">News</h2>
30          <a href="#"><span>yyyy.mm.dd</span><br>お知らせ</a>
31          <a href="#"><span>yyyy.mm.dd</span><br>お知らせ</a>
32          <a href="#"><span>yyyy.mm.dd</span><br>お知らせ</a>
33        </div>
34        <div class="col-xs-6 Event w-50">
35          <h2 style="color:white;">Event</h2>
36          <p style="color:white;">セミナーの情報</p>
37        </div>
38      </div>
39      <!-- 事業紹介 -->
40      <div class="row">
41        <div class="col-xs-12 w-100">
42          <h1>適用したい部分</h1>
43        </div>
44      </div>

CSSの操作が上手くいかない原因に関して、何かご存じの方がいらっしゃれば、ご教示頂けると幸いです。
宜しくお願い致します。

コンソールで確認した部分

・titleで取得している要素は取得できているかどうか
→取得はできていました。

JavaScript
1var browser = platform.name;
2var os = platform.os;
3
4os = os.toString();
5os = os.substr(0, 7);
6
7
8var title = document.getElementsByTagName('h1');
9  console.log(title);
10
11if ( browser == "Safari" && os == "Windows" ) {
12  console.log("通りました");
13
14  title.style.fontSize = "16px";
15  title.style.color = "red";
16} else {
17  console.log("CSSの書き換えはなし");
18}
19

コンソールにはh1の内容と、通りましたという文が出てきました。
そして、title.style.fontSize = "16px";のところで、エラー文が出ていました。
エラー文は以下のようなものでした。
TypeError: 'undefined' is not an object (evaluating 'title.style.fontSize = "16px"')

miyabi_pudding

2019/12/09 08:29

HTMLは、該当のCSSをコントロールしたい部分も含めて記載してください。上記を踏まえて、まず、要素を検証する、などでデベロッパーツールを出し、console.logなどを使い、下記をご確認ください。・titleで取得している要素は、取得できているかどうか・if ( browser == "Safari" && os == "Windows" ) { の条件式内は通っているか・他に優先されるCSSを効かせていないかどうか。（もしかしたら、color: green !important;などとしていると、そちらが優先される可能性があります）特に一つ目は、取得できていない場合は、コンソールでエラーをはいているので、一発でわかります。その場合は、エラー文も、"質問本文"に記載してください。

行動規範の内容に同意します

回答2件

できるだけ全てのデバイスやブラウザーに対応するようにウェブサイトの制作に挑戦しているところです。

（中略）Windowsで開かれたSafariでは独自のCSSを適用するということを行おうとしています。

Windows版Safariは、

最終リリースが2012年（それ以降の不具合はすべて放置）
SHA-2証明書やTLS 1.2に非対応であり、常時SSLが当たり前になった＆SSLが進化した現代では、見られないサイトのほうが多い
Internet Explorerと違って、わざわざインストールしないと使えない

代物であり、いまさらサポートするのに工数を割く必要は0に等しいです。

投稿2019/12/09 08:21

maisumakun

総合スコア145184

AkitoshiManabe

2019/12/09 10:36

Chrome https://www.google.com/intl/ja_jp/chrome/ Firefox https://www.mozilla.org/ja/firefox/ 正直、乗り換えを検討するよう奨める以外、思いつきませんでした。

行動規範の内容に同意します

ベストアンサー

できるだけ全てのデバイスやブラウザーに対応するように

クロスブラウザやクロスデバイスという考え方は誰もが賛同すると思います。
しかし、提供元がサポートを終了して久しいものを、安易に対応していこうという姿勢 は誰もが否定するでしょう。

Wikipedia:Safari のWindows版の説明をご覧ください。

2012年10月23日、情報処理推進機構はセキュリティホールが存在するため使用停止を勧告した

Haruto513 さんの挑戦は、「バックドアを開けようとする行為」に過ぎません。

「エンジニアの風上にもおけない輩」にはならないよう、その挑戦は、IE11までに留める姿勢に改めてください。

投稿2019/12/10 03:46

AkitoshiManabe

総合スコア5432

Haruto513

2019/12/10 04:16

Windows版Safariへの対応はあまり褒められたことではないのですね。回答や回答に対する反応を見る限り、Windows版Safari対応はやめておいたほうが良さそうですね。一応JavaScriptでOSやブラウザーを判定して、読み込むCSSファイルを変える方法も思いついたのですが、この挑戦に関しては「あきらめる」ことにします。回答をくださってどうもありがとうございました。