What are the meanings of a mode name and .maker? |
What are the meanings of a mode name and .maker? |
bhs67 |
Apr 17 2024, 10:20 AM
Post
#1
|
Group: Members Posts: 6 Joined: 17-April 24 Member No.: 29,168 |
Segments of index.html:
CODE <body mode="maker"> ... <div class="maker"> Segments of index.css: CODE .maker { display: flex; flex-flow: column; justify-content: space-between; height: 460px; width: 400px; } .maker > div { display: flex; justify-content: space-between; } 1) It appears that CODE <body mode="maker"> is the code to assign the name "maker" to the <body>? And "mode" is the way to assign that name?2) It appears that CODE <div class="maker"> assigns that <div class> to the the <body> named "maker"?3) Does adding the "." to the name "maker" CODE .maker - tie this code to the body named "maker"?4) It's not clear to me the difference between CODE .maker {...} and CODE .maker > div {...} |
bhs67 |
Apr 18 2024, 08:29 AM
Post
#2
|
Group: Members Posts: 6 Joined: 17-April 24 Member No.: 29,168 |
Thanks for the clarifications!
I inadvertently deleted my first sentence -> "I downloaded HTML / CSS / JS code from a Blockly website which I do not fully understand". I should have included a segment of the JS code. The JS code contains: CODE // Called by a "mouse click" via an EventListener function enableMakerMode() { document.body.setAttribute('mode', 'maker'); document.querySelectorAll('.button').forEach(btn => { btn.addEventListener('click', handlePlay); btn.removeEventListener('click', enableBlocklyMode); }); } Does this explain the use of mode? CODE <body mode="maker"> |
Christian J |
Apr 18 2024, 09:41 AM
Post
#3
|
. Group: WDG Moderators Posts: 9,678 Joined: 10-August 06 Member No.: 7 |
Does this explain the use of mode? The JS above adds the same MODE attribute to the BODY element, which seems unnecessary if it's already present in the static HTML. HTML5 does allow the use of custom "data-*" attributes for use with e.g. JS, but such attributes must then be prefixed with "data-", so in this case correct syntax (according to the HTML spec) might be CODE <body data-mode="maker"> (with corresponding changes to the JS and CSS). See also https://developer.mozilla.org/en-US/docs/Le...data_attributes https://html.spec.whatwg.org/multipage/dom....-data-attribute |
coothead |
Apr 18 2024, 10:22 AM
Post
#4
|
Advanced Member Group: Members Posts: 207 Joined: 12-January 23 From: chertsey, a small town 25 miles south west of london, england Member No.: 28,743 |
coothead |
Christian J |
Apr 18 2024, 11:36 AM
Post
#5
|
. Group: WDG Moderators Posts: 9,678 Joined: 10-August 06 Member No.: 7 |
As a matter of interest, the body element does not even need to be coded True, according to the spec (ditto for HTML and HEAD). In practice I recall there used to be browser issues with CSS if you didn't type out the BODY start and end tags, has that changed at some point? QUOTE Attributes in any form for the body tag can serve no purpose. There might be special cases, such as using CLASS or ID to target a particular HTML document's BODY element in an external stylesheet. In OP's code example, maybe the JS uses the MODE attribute to indicate that the page is in some kind of editable mode? But the same thing might be possible to achieve by changing a JS variable. |
coothead |
Apr 18 2024, 11:56 AM
Post
#6
|
Advanced Member Group: Members Posts: 207 Joined: 12-January 23 From: chertsey, a small town 25 miles south west of london, england Member No.: 28,743 |
coothead |
Christian J |
Apr 18 2024, 12:49 PM
Post
#7
|
. Group: WDG Moderators Posts: 9,678 Joined: 10-August 06 Member No.: 7 |
[indent] No need, see attachment... No, I meant if you have multiple HTML documents, each with a different BODY CLASS value. Then an external stylesheet can style each page differently, like in this example (not my own) for styling the current page's own link differently: External CSS: CODE body.home a.home, body.contact a.contact {text-decoration: none;} index.html: CODE <body class="home"> <a href="/" class="home">Home</a> <a href="contact.html" class="contact">Contact</a> contact.html: CODE <body class="contact"> <a href="/" class="home">Home</a> <a href="contact.html" class="contact">Contact</a> (Personally I'd rather use server-side scripting for such effects, though.) |
coothead |
Apr 18 2024, 05:07 PM
Post
#8
|
Advanced Member Group: Members Posts: 207 Joined: 12-January 23 From: chertsey, a small town 25 miles south west of london, england Member No.: 28,743 |
coothead |
Lo-Fi Version | Time is now: 3rd June 2024 - 09:21 AM |