Yukinu's Forum

Amelia wrote: ↑Tue Jan 09, 2024 4:20 pm One of the cool things I really like about the website is that Yukinu is actively trying to make it as compatible with obscure technologies as humanly possible. This site taught me about the existence of the <details> tag. Now I write my website page by page, by hand, and my 'once a frames user, always a frames user' philosophy knocks most of my site's sidebar menu off of browsers without <iframes> support, I would still love to learn more on how I could optimize my site further, what HTML tags and CSS attributes to use and what to avoid, and such.

<video style="max-width: 100%;" width="1920" height="1080" poster="video.png" controls="controls">
  <source src="video.ogv" type="video/ogg" />
  <source src="video.webm" type="video/webm" />
  <source src="video.mp4" type="video/mp4" />
  <object width="1920" height="1080" type="application/x-shockwave-flash" data="video.swf">
    <param name="movie" value="video.swf" />
    <param name="flashvars" value="controlbar=over&amp;image=video.png&amp;file=video.mp4" />
    <a href="video.ogv">
      <img style="max-width: 100%" src="video.png" />
    </a>
  </object>
</video>

• I keep my browser viewport in 1024x768 resolution.
  • This was one of the most common screen resolutions in the 2000s, and designing your site around this resolution will ensure that it's viewable properly on older hardware.
  • Targeting this resolution doesn't compromise making your site mobile friendly either. Older browsers don't support media queries, but essentially the entire history of mobile browsers supports them, so you start with a backwards compatible desktop site, and scale it down to backwards and forwards compatible mobile friendly site.
  • For even better backwards compatibility, target 800x600 viewport.
• I don't use any new CSS features unless they have a clear fallback. For example, the background gradient on the site uses linear-gradient(), but I fall back to a gradient background image if the browser (like Netsurf) doesn't support that CSS feature. Background images have been a standard CSS feature for decades.
• I don't use any new CSS layouts. You can actually get flexible pages without flexbox or flexgrid by using the older CSS float layout and HTML tables.
• I keep copies of old browsers around. In particular, I tend to test on:
  • Palemoon (Goanna engine).
  • Opera 12 (before the shift to chromium).
  • IE8 (IE6 would be slightly better to test on, but I don't have a copy that works with WINE).
  • Netsurf (independent browser and engine that is available on many platforms, doesn't have any JavaScript).
• When I write JavaScript code, I generally write in ES3/ES5.
  • The JS engines are typically optimized for ES3/ES5, and a lot of ES6+ features are actually slower than similar ES3/ES5 ones (for example, document.querySelector('#foo') is massively slower than document.getElementById('foo'), and yet both do effectively the same thing).
  • The best way to learn ES3/ES5 is to pick up an old JavaScript book from the 2000s. JavaScript was actually quite cozy at this time, given how small the language was back then.
• When in doubt, check https://caniuse.com to see how long an HTML, CSS, or JS feature has been supported.

Amelia wrote: ↑Tue Jan 09, 2024 4:20 pm This site taught me about the existence of the <details> tag.

Guest wrote: ↑Thu Jan 11, 2024 6:32 pm I've also replaced all the variables in my CSS with just plain old numbers and a comment after them for easier 'search and replace' shenanigans.

/* base.scss */
:root {
  --red-color: #ee0000;
  --green-color: #00ee00;
  --blue-color: #0000ee;
}

body {
    color: var(--red-color);
    background-color: var(--blue-color);
}

p {
    color: var(--green-color);
    background-color: var(--blue-color);
}

/* base.scss */
$red-color: #ee0000;
$green-color: #00ee00;
$blue-color: #0000ee;

body {
    color: $red-color;
    background-color: $blue-color;
}

p {
    color: $green-color;
    background-color: $blue-color;
}

sassc base.scss > base.css

/* base.scss */
body {
  color: #ee0000;
  background-color: #0000ee; }

p {
  color: #00ee00;
  background-color: #0000ee; }

Leva wrote: ↑Tue Jan 09, 2024 9:45 pm Work with relative measurements (for example % values) rather than with absolutes.

• vh, vw, and calc can be useful but are not backwards compatible.
• I wouldn't necessarily rule out using em, rem units, since you can generally use px as a fallback (see the below example), but I've found that much of the benefits of relative units can be achieved by using <meta name="viewport" content="width=device-width, initial-scale=1.0"> and px units with @media queries while retaining backwards compatibility.
• % is generally backwards compatible and is useful for page layout.

/* first font-size will be chosen for browsers without em support */
p {
  font-size: 12px;
  font-size: 1em;
}