johnywhy:
If the same image url is referenced twice, won’t the client use it’s own cache for the second reference on the same html page? Is there a way to force that? I understand there are some declarations for caching, but i don’t know if they would help in this scenario.
Yes if the same image is used twice on the page then the second or subsequent images are taken from cache. There is no overhead in repeating the same image.
johnywhy:
Is a lightbox a “modal”? In desktop programming, modal means you can’t click anything else until you close the modal. Some of the “modals” and lightboxes i posted above close when you click outside the modal.
They keep changing the terms but generally a modal is something that opens over other content and directs your attention to whatever is displayed. Usually you would have to dismiss the modal before you can continue with something else.
Whether or not clicking outside the element should close it is a UI question but often it makes it easier to use if you can click outside the element. However if you have content close to the inside edge of a modal and a user with poor motor control may click accidentally outside and close the modal before completing the task. As I said there never is a straight answer.
johnywhy:
Interactive” meaning, simple links are ok unless there’s a CSS
:target
rule which applies to them?
If you have used :target to open a modal and then when you click any link in your modal the modal will close. This means that if in your modal you had a fragment identifier to other content in the modal the user would never see the other content because the modal would close. An element is only a target until its not.
johnywhy:
CSS vs JS
That’s an age old question and the lines have become blurred in recent years with some of the new css properties.
Generally CSS is for presentation and JS is for behaviour.
If you can avoid js then yes it’s better to do without but not at the cost of complexity or bad accessibility. Of course you should ensure your page works if js is disabled which is why it should usually be added on afterwards as an enhancement. Sometimes though it’s not that easy to accomplish.
johnywhy:
If the item needs to change in visibility, needs to be animated, or have any other visual change made to is, use CSS. (that’s my goal here)
Css can handle the presentation and animation but very often you need that to happen in response to a behaviour. This can be accomplished by JS adding a class to an element to trigger the animation to start. Something that can’t often be achieved with css alone.
johnywhy:
CSS 3 is a mixture of CSS+JS and this enables you to develop your code faster (wow, cool! True?)
No css3 is css.
johnywhy:
CSS may be inaccessible (but
:focus
selector may fix that)
Css isn’t inaccessible as such but you do need to take care that keyboard users can use your page easily and generally that means highlighting elements using :focus so you can see where you have tabbed to.
johnywhy:
old browsers which don’t have CSS3 support. (but i made a decision not to support such browsers. Too much dev effort for a very small, shrinking user-group).
Modern browsers have great support. You should not support a browser where the vendor no longer supports it. Old browsers are a security hazard and all the ransomware viruses targeted older browsers so you should encourage users to use an updated newer browser.
You can check support for new features on the caniuse site and using @supports you can build in fallbacks where needed. These days CSS is open ended in that you are always going to get new features so you won’t really have ccs4 or 5. Numbers are irrelevant.
johnywhy:
What are the downsides to inline click handlers?
They are javascript in your html.
Javascript belongs in a javascript file just as css belongs in the css file. Once you start inlining any of those then you are no longer separating the concerns and basically hard wiring your mark up. You may as well go back to font tags and the like
johnywhy:
Can we enable escape key to close the modal? I only see JS methods for the escape key.
Yes you need js for that and escape is not a key I would generally search for.
johnywhy:
It seems that, due to the border-color change when they tab to it, they will know it’s a hotspot of some kind, such as a simple link. So they will still know to hit the spacebar.
No, as I said before the general way that you action a link via the keyboard is to hit return (enter). No one knows that your checkbox hack is a checkbox because it is hidden. they would never think to click the spacebar. The spacebar is only used in form controls and not general links or actions. Enter is the key you want to work for this. If you try my example you will see that you can tab to the image (as I set the border on focus) and it will open the modal if you press the spacebar. Most users will not know to do that.
johnywhy:
Unclear. Isn’t spacebar is the normal keyboard-click?
No, only for form elements. All links are actioned by enter. When you open a modal you are basically linking to a modal in essence.
I’ve quickly recoded my last demo to use JS so that you can see how much easier the keyboard behaviour is. You can tab to the element and then press enter and it will open and then you can tab to the close icon and press enter and it will close. All without using the mouse.
I’ve also use js to copy the image and its title into the new modal automatically so there is no duplicate content. This allows the page to remain nicely underneath undisturbed. I hate it when elements disappear and appear somewhere else and is a usability failure.
I haven’t dotted all the i’s as that was a quick recode but the general idea is sound.