<DETAILS> does and doesn't work

MrVideo

Fedora Linux
snapshot: 5.1.2514.11 (Official Build) snapshot (64-bit)

On this page, it appears to work: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

But, on my page it appears to ignore the definitions in the CSS file: http://vidiot.com

Any ideas?

luetage

@MrVideo Details would be helpful. Anyway, when visiting the page, the CSS declarations for the »details« element work fine here (border, border-radius, padding).

DoctorG

@MrVideo The HTML5-Element Details works on your page and expands on click.

But what do you want to style with CSS?
How should it look like?

My test on your page:

MrVideo

I figured that pictures were worth a thousand words. In the first link, the example has the border, padding and bold text.

On my page, all of the CSS definitions are missing. No border, no bold text, etc. Clicking on the text does display the text/images. But it is bare bones.

MrVideo

@DoctorG said in <DETAILS> does and doesn't work:

@MrVideo The HTML5-Element Details works on your page and expands on click.

But what do you want to style with CSS?
How should it look like.

It should look like the example on the definitions page.

luetage

@MrVideo The page and the details elements look exactly the same on Firefox. Whatever your problem is, it’s not with Vivaldi.

MrVideo

@DoctorG That is not what I see with the snapshot version I am using.

DoctorG

@MrVideo With 5.6.2824.8 i get the same as in example of MDN page.
Hit Ctrl F5 to reload!

MrVideo

@DoctorG OK, Ctrl-F5 worked. Why?

Doesn't doing a regular reload, via the circular arrow button, reload the CSS file?

DoctorG

@MrVideo A regular reload with F5 or ↻ button checks in browser cache if cache-duration has expired.
Depends what your server sends as response for HTTP header Expired, Last-Modified and ETag to browser.

MrVideo

@DoctorG Thanks for the help and info. Learned something new today.

Pathduck

@MrVideo Generally when doing web development, it's a good idea to always use Ctrl+F5 instead of F5 to ensure your server-side changes are shown. Also a good idea to have the Developer Tools open with "Disable Cache" set.

MrVideo

@Pathduck Thanks for the tip.

DoctorG

@MrVideo Your server does not send a Expires header for the CSS file. As a result a cache is allowed to set its own expiration.

Check at https://redbot.org/?uri=http://vidiot.com/styles/generic.css