Text is beautiful, smooth, and readable. I don't wish I had bought a Mac when I read it. Should be jagged.

The license content suggests a copyright, but the repo license is MIT.

https://github.com/jdan/98.css/blob/master/LICENSE

What's the license in the end?

If you open the page in an external(non-retina) screen in latest Safari on MacOS Catalina, font smoothing doesn't render properly. Here is a screenshot:

On a Windows machine (98 style), the button text actually shifts down and right a pixel, contributing to the 'pressed' look and feel.

I have a fix for this but don't have contributor access to submit a PR for review. It was...surprisingly finicky to get right cross-browser.

Subj. I think it was called "spin boxes" in Windows 98?

I think the cursor/mouse pointer used to change when hovering over certain things...
(TBH I can't remember exactly)

browser: chrome stable
Show scrollbars: When scrolling

When attempting to deploy my app made with React with 98.css, it presents an error message:

./node_modules/98.css/build/98.css
ParserError: Syntax Error at line: 1, column 6
at Array.forEach ()
at Array.forEach ()

and refuses to compile! Reinstalling 98.css with npm and updating the packages along with reconfiguring my packages.json(https://blog.usejournal.com/how-to-deploy-your-react-app-into-github-pages-b2c96292b18e) does not aid the problem. This has been a consistent issue I have been encountering and is preventing me from further developing my personal website.

On Firefox, the group box border does not render.

It would be really nice to have a themed slider control component.

https://flylib.com/books/en/4.348.1.74/1/

The Windows Classic style UIs don't have rounded rectangles. On at least Chrome and Edge Preview, you need border-radius: 0 to achieve the hard edges.

It's so razor thin I can't really read it anymore.

We have the maximize button but not the restore button.

On the https://jdan.github.io/98.css/ page, "disabled" buttons still can be "clicked" - they show their :active state.

I checked The Windows Interface Guidelines for Software Design (p. 381-382 for information on unavailable appearance for buttons), but it does not specifically say what the correct behavior is. Still, it seems like it will be more logical for a disabled button to not be "clickable" - especially as it will not perform any action.

Not sure if this was intended or not, but in a tree if there is an element with more than one word it appears slightly bolder than one with a single word.

Reference screenshot found online:

Current dropdown in latest Edge Dev (Chromium):

Also the hover state doesn't seem right.

EDIT: This may be a limitation of using a native select component.

Set up Travis CI so that when commits are pushed to the master branch, the project is built and the result is pushed back to master. This should make pull request diffs easier to read and it will prevent branches from being polluted with "Build project" commits every time a change is requested.

This happens if you change the fallback-colours in your browser to light text on dark background.

You should not be able to select certain text, like the checkbox or radio label or other labels.

Missing styles for a BSOD. I recall seeing that quite a bit back in the day.

the input[type="file"] is unstyled

As many of you noticed, build/98.css and docs/98.css are checked in. docs/ powers https://jdan.github.io/98.css, and build/ allows folks to use 98.css via https://unpkg.com/98.css

However, these are annoying to deal with in PRs! They're minified so we get conflicts on pretty much every commit. I used to have an npm test (+ travis integration) to make sure people ran npm run build, but I've just removed that. I'm starting to think we don't want any PRs to include build/98.css or docs/98.css.

Any ideas for making this more pleasant?

I've seen windows are created with div elements, wouldn't it be better to user header, article, footer and other similar ones to identify each section?

This conflicts with the custom one. Seems to need

button::-moz-focus-inner {
  border: 0;
}

The stylesheet lacks the Tab control. It's quite intricate in implementation, especially when rows are involved.

This feature is missed: http://www.pccaretips.com/images/blog/errors/computer-freeze.jpeg

Couldn't find a position on this, so I figured I'd mention it here.

Traditionally on Windows platforms (Including Windows 98), labels (and legends, window title bars, etc) cannot have their text selected. Modern systems allow you to double-click labels to copy their text however.

As accessibility is a priority, I'd recommend considering the ramifications of this. With my experience with assistive technology, you should still be able to read those out, even with text selection disallowed.

Another option may be able to have a utility class that explicitly allows for selection (Or a custom data attribute) but there doesn't seem to be much of that in this project so far.

Either way, I thought it'd be good to discuss!

Hi,

I saw this posted on Hacker News and I was wondering why you use box-shadow for the "3D effect" on buttons and window borders instead of border-style: outset. Is there a technical reason for it?

I think the box-shadow version makes it look a bit softer than it was in Windows 98.

Hi! Nice css!

Here are some duplicates from https://jdan.github.io/98.css/:
http://i.imgur.com/2uUluIv.png
http://i.imgur.com/o3kHimb.png

PaleMoon 28.9.1

GroupBoxes are 2 colored (white and dark gray) in w98, however the css has them colored in 4 colors (black, d gray, b gray, white)
example in windows 98:

css:

I'm not sure what to call this, but some windows would have an inset border for images or other components, similar to text areas. Here are a couple screenshots:

The test area in the bottom right:

The image in the window behind the menus:

This inset border is used for most windows that contain other items, like the file explorer or browser (also seen in the second image). Note that this is different from the Group Box border. It's actually the inverse of the regular window border; the highlight is bottom-right and shadow is top-left, since it's inset.

I don't have a copy of Windows 98 handy to check and capture a video of this in action (or any versions of Windows, for that matter), but the behaviour of Windows Classic on newer versions of Windows is that the text of a button moves when the button is in a depressed state. I don't expect this to have been different in Windows 98.

According to my theme designer, the text moves 1px down and 1px right from its normal position.

Windows 3.x XP Vista style
Mac OS ?

Hi. The Chicago rendering theme introduced in Windows 95 actually has a fairly prominent mistake in it that your recreation is missing; specifically, window borders (and only window borders) have the "Light" and "Hilight" colours swapped. I've attached some comparative screenshots for reference. You can check ToastyTech for more exact metrics, e.g. fixing the padding on the window caption text and the caption bar context buttons.

Description

TextBox has rounded corners when viewing on iOS using Google Chrome.

Might be fixed by #3

Screenshot

It would be nice to have the start menu recreated so it can be used as a navbar.

The stylesheet looks amazing, but it still lacks the ProgressBar control.
It would be nice to see it added.

It would be awesome to have some kind of table component.

Keep it up, this looks awesome!!! 🎉

I may be mistaken, but clicking and dragging on labels of a checkbox shouldn't highlight the selected text in blue. If this is the case, and it wouldn't negatively hamper a11y to do so, it seems like the fix is: https://stackoverflow.com/questions/924916/is-there-a-way-to-make-a-div-unselectable?

Feel free to close this issue if either of my two assumptions above (98 components have un-selectable checkbox/radio labels, and making it unselectable wouldn't damage accessibility somehow) is false, but this was just a thought. I'm happy to take this on myself if nobody else grabs it.

I see there's a letter-spacing: -0.03ch. I'm not sure if that's what you were going for:

(this is Firefox on Windows 10)

I think that because Windows uses pretty aggressive hinting, the spaces between letters become more uneven, sometimes snapping to 1 pixel and sometimes to 2 pixels. I can only speak for myself but the end result looks... broken.

Maybe using another, narrower font would have a better effect than this tweak?

Now that I think of it, turning off ligatures could also help: some of the "tt", "ti" and so on look like a big part of the problem.

Great project, by the way :)

I have a trree view in a field-row.
Found that the first

According to the high-quality screenshots in the GUIdebook gallery, the titlebar gradient should not span the entire width of the titlebar, but only the title portion. The window icon has a solid background (ActiveTitle, InactiveTitle), and the window controls have a solid background (GradientActiveTitle, GradientInactiveTitle).

If you would like to use it as a reference, I attempted to make a faithful recreation myself a few years ago for a Windows theme creator and I believe I the colour mapping to the various elements are correct. The repo is tpenguinltg/winclassic (demo). You can load the Windows 98 values into the box to see it live.

It appears that the buttons on the title bar and the borders are not quite the same as on actual Windows 98.

Please compare (grey background is 98.css, teal is Windows 98):
- 98.css
- Windows 98
- overlaid and centered on the top right corner
- centered on the close button

Hi !!!

I noticed that the scrollbars were missing, I played a bit on CodePen to try to reproduce them, and I came up with this result: https://codepen.io/BeardedBear/pen/jObVXmV

Are you interested? Feel free to retrieve the code if you are :)

however, I never found solutions for Firefox :(

Edit note : Thanks padraigfl for the button trick.

There's support for the disabled attribute, but I don't see support for the readonly.

They look the same, but behave differently. The disabled inputs don't present in the POST data, while the readonly ones do.

To closer mimic the original, when clicking and holding these controls, they should be displayed differently. IIRC Windows changes the white background to gray.

Development is a little wonky. Would be nice if an npm start could watch for file changes and serve docs/index.html.ejs. Bonus points for hot reloading :)

I'd love color theme support. Custom colors were a wonderful way to personalize your os.