ie4

Makefile

@@ -10,7 +10,7 @@ all: clean css stamp
 clean:
 	@# clean scss
 	@printf "\033[31m  RM  \033[0m%s\n" src/public/css
-	@rm -f src/public/css/*.css
+	@rm -fr src/public/css/*
 	@git stash -- src/public/css/prism.css > /dev/null
 
 	@# clean stamps

src/public/css/bucket/legacy.css

@@ -1 +0,0 @@
-#webring{height:5px}

src/public/css/ie/boxsizing.css

@@ -1 +0,0 @@
-*{behavior:url(boxsizing.htc)}

src/public/css/ie/ie.css

@@ -1 +1 @@
-#header .ie-nav{margin-left:90px}#main .col{display:block !important;width:100% !important}#main .col.left{padding-right:0 !important}#main .section .heading{background:#366199 !important}#main #post .posted,#main #writeup .posted{margin-top:16px}#main #comments #new_comment{width:400px}#main #comments #new_comment #author,#main #comments #new_comment #content{width:400px !important}#main table{behavior:url(boxsizing.htc)}
+#header .ie-nav{margin-left:90px}#main .col{display:block;width:100%}#main .col.left{padding-right:0}#main .section h2.heading{background:#366199}#main #post .posted,#main #writeup .posted{margin-top:16px}#main #comments form,#main #comments form#new_comment{width:400px}#main #comments form input,#main #comments form input#author,#main #comments form input#content,#main #comments form#new_comment input,#main #comments form#new_comment input#author,#main #comments form#new_comment input#content{width:400px}#main table{behavior:url(boxsizing.htc)}

src/public/css/ie/ie4.css

@@ -0,0 +1 @@
+#header #nav li{padding:0px !important;margin:0px !important;margin-top:16px}

src/public/css/ie/ie5.css

@@ -1 +0,0 @@
-.ie-nav{margin-left:90px}#main .col{display:block !important;width:100% !important}#main .left{padding-right:0 !important;padding-bottom:16px}#main .right{margin-top:16px}#new_comment{width:400px}#new_comment .input{width:400px}

src/public/css/ie/ie6.css

@@ -1 +1 @@
-*{behavior:url(boxsizing.htc)}body #main .col.left{margin-bottom:16px}body #main .col.right{margin-top:16px !important}body #contact{margin-bottom:0 !important}body #footer{margin-top:16px !important}
+*{behavior:url(boxsizing.htc)}body #main .coldiv.left{margin-bottom:16px}body #main .coldiv.right{margin-top:16px}body div#contact{margin-bottom:0}body div#footer{margin-top:16px}

src/public/css/ie/ie6.scss.css

@@ -1 +0,0 @@
-*{behavior:url(boxsizing.htc)}

src/public/css/ie/main.css

@@ -1 +0,0 @@
-.ie-nav{margin-left:90px}#main .col{display:block !important;width:100% !important}#main .left{padding-right:0 !important;padding-bottom:16px}#main .right{margin-top:16px}#new_comment{width:400px}#new_comment .input{width:400px}

src/scss/blog.scss

@@ -42,7 +42,8 @@
 		}
 	}
 
-	#new_comment {
+	form, /* ie4 */
+	form#new_comment {
 		margin-left: $inner-gap;
 		max-width: 400px;
 		padding-right: $inner-gap;
@@ -53,6 +54,7 @@
 
 		input#author,
 		input#content {
+			display: block;
 			width: 100%;
 		}
 

src/scss/ie/ie.scss

@@ -10,18 +10,18 @@
 
 #main {
 	.col {
-		display: block !important;
-		width: 100% !important;
+		display: block;
+		width: 100%;
 
 		&.left {
-			padding-right: 0 !important;
+			padding-right: 0;
 		}
 
 	}
 
 	.section {
-		.heading {
-			background: $blue !important;
+		h2.heading {
+			background: $blue;
 		}
 	}
 
@@ -33,12 +33,15 @@
 	}
 
 	#comments {
-		#new_comment {
+		form, /* ie4 */
+		form#new_comment {
+
 			width: 400px;
 
-			#author,
-			#content {
-				width: 400px !important;
+			input,
+			input#author,
+			input#content {
+				width: 400px;
 			}
 		}
 	}

src/scss/ie/ie4.scss

@@ -0,0 +1,16 @@
+/* IE 4 Only */
+
+@import "../variables";
+
+/**
+ * Display inner block does not seem to work on thead
+ * li elements in IE4, so just make the list vertical
+ */
+
+#header {
+	#nav li {
+		padding: 0px !important;
+		margin: 0px !important;
+		margin-top: $inner-gap;
+	}
+}

src/scss/ie/ie6.scss

@@ -20,22 +20,22 @@ body {
 	#main {
 		.col {
 
-			&.left {
+			&div.left {
 				margin-bottom: $inner-gap;
 			}
 
-			&.right {
-				margin-top: $inner-gap !important;
+			&div.right {
+				margin-top: $inner-gap;
 			}
 
 		}
 	}
 
-	#contact {
-		margin-bottom: 0 !important;
+	div#contact {
+		margin-bottom: 0;
 	}
 
-	#footer {
-		margin-top: $inner-gap !important;
+	div#footer {
+		margin-top: $inner-gap;
 	}
 }

src/web/_model/blog.php

@@ -42,7 +42,7 @@ class Blog_model extends Model {
 		$base = $this->get_url('');
 
 		$replace = "<a href=\"{$base}\\1\">";
-		$replace .= IE_START . "<img class=\"center\" src=\"{$base}\\1\" title=\"\\2\" alt=\"\\2\">" . IE_END;
+		$replace .= ie('<center>') . "<img class=\"center\" src=\"{$base}\\1\" title=\"\\2\" alt=\"\\2\">" . ie('</center>');
 		$replace .= "</a>";
 
 		$md = preg_replace($pattern, $replace, $md);

src/web/_views/comments.php

@@ -18,24 +18,24 @@
 	<div class="new">
 		<h3><?=lang('new_comment_title')?></h3>
 		<form id="new_comment" method="get" action="<?=lang('base_path') . '_comments/post'?>">
-			<input
+			<div><input
 				type="text"
 				name="author"
 				id="author"
 				aria-label="<?=lang('new_comment_author_label')?>"
-				placeholder="<?=lang('new_comment_author_ph')?>">
-			<input
+				placeholder="<?=lang('new_comment_author_ph')?>"></div>
+			<div><input
 				type="text"
 				name="content"
 				id="content"
 				aria-label="<?=lang('new_comment_content_label')?>"
-				placeholder="<?=lang('new_comment_content_ph')?>">
+				placeholder="<?=lang('new_comment_content_ph')?>"></div>
 			<input
 				type="hidden"
 				class="hidden"
 				name="ref"
 				value="<?=base64_encode($ref)?>">
-			<input
+			<div><input
 				type="hidden"
 				class="hidden"
 				name="page"

src/web/_views/footer.php

@@ -47,8 +47,6 @@
 			></iframe>
 		</div>
 	</div>
-<!--[if lt IE 8 ]>
-	</center>
-<![endif]-->
+	<?=ie('</center>')?>
 	</body>
 </html>

src/web/_views/head.php

@@ -21,15 +21,17 @@
 		<link rel="icon" type="image/png" sizes="512x512" href="<?=$this->get_url("public/icons/logo512.png", TRUE)?>">
 		<link rel="icon" type="image/png" sizes="640x640" href="<?=$this->get_url("public/icons/logo640.png", TRUE)?>">
 		<link rel="manifest" href="/manifest.json">
-		<!--[if lt IE 8 ]>
-			<?=$this->embed_css('css/ie/ie.css')?>
-		<![endif]-->
+		<?=$this->link_css('css/main.css');?>
+		<?=ie($this->embed_css('css/ie/ie.css'))?>
+		<?=ie_ua($this->embed_css('css/ie/ie4.css'), 4)?>
 		<!--[if (gt IE 5)&(lt IE 8) ]>
 			<?=$this->embed_css('css/ie/ie6.css')?>
 		<![endif]-->
 		<?php foreach($css as $file)
 			echo $this->embed_css($file);
 		?>
+		<?=ie('<iframe width="0" height="0">')?>
 		<?php foreach($js as $file)
 			echo $this->link_js($file);
 		?>
+		<?=ie('</iframe>')?>

src/web/_views/header.php

@@ -1,13 +1,10 @@
 <?php /* Copyright (c) 2024 Freya Murphy */ ?>
 <?php
 	$this->view('head', $data);
-	echo $this->link_css('css/main.css');
 ?>
 </head>
 <body>
-<!--[if lt IE 8 ]>
-	<center>
-<![endif]-->
+<?=ie('<center>')?>
 <div class="center">
 	<div id="header" role="banner" aria-label="banner">
 		<?=image('img/headerLogo', 'alt_website_logo', size: '200')?>

src/web/helpers/ie.php

@@ -0,0 +1,29 @@
+<?php /* Copyright (c) 2024 Freya Murphy */
+
+/// IE 5 though 8 support IE conditional comments
+/// IE 4 does not (need to fall back to user agent)
+
+$__ie_ver = FALSE;
+
+if (preg_match('/MSIE\s(?P<v>\d+)/i', @$_SERVER['HTTP_USER_AGENT'], $B)) {
+	$__ie_ver = $B['v'];
+}
+if ($__ie_ver == FALSE || $__ie_ver > 4) {
+	// ADD COND COMMENTS
+	define('IE_START', "<!--[if lt IE 8 ]>");
+	define('IE_END', "<![endif]-->");
+} else {
+	// IE4 DETECTED, DO NOT ADD COMMENTS
+	define('IE_START', '');
+	define('IE_END', '');
+}
+
+function ie(string $inner) {
+	return IE_START . $inner . IE_END;
+}
+
+function ie_ua(string $inner, int $ver) {
+	if ($GLOBALS['__ie_ver'] == $ver)
+		return $inner;
+	return '';
+}

src/web/index.php

@@ -3,6 +3,7 @@
 // ========================= ENVIRONMENT ==
 
 ini_set('html_errors', '1');
+ini_set('browscap', 'browscap.ini');
 date_default_timezone_set('America/New_York');
 
 // ENVIRONMENT
@@ -23,11 +24,6 @@ define('WEB_ROOT', PHP_ROOT . '/web');
 define('ASSET_ROOT', PHP_ROOT . '/assets');
 define('PUBLIC_ROOT', PHP_ROOT . '/public');
 
-// ========================== VARIABLES ==
-
-define('IE_START', "<!--[if lt IE 8 ]>\n<center>\n<![endif]-->");
-define('IE_END', "<!--[if lt IE 8 ]>\n</center>\n<![endif]-->");
-
 // ========================== BOOTSTRAP ==
 
 // load all third party
@@ -39,6 +35,7 @@ require(WEB_ROOT . '/config/routes.php');
 require(WEB_ROOT . '/config/style.php');
 
 // load all the helpers
+require(WEB_ROOT . '/helpers/ie.php');
 require(WEB_ROOT . '/helpers/lang.php');
 require(WEB_ROOT . '/helpers/aria.php');
 require(WEB_ROOT . '/helpers/image.php');