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: 9 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 {...} |
coothead |
Apr 17 2024, 11:11 AM
Post
#2
|
Advanced Member Group: Members Posts: 226 Joined: 12-January 23 From: chertsey, a small town 25 miles south west of london, england Member No.: 28,743 |
coothead |
Christian J |
Apr 17 2024, 02:13 PM
Post
#3
|
. Group: WDG Moderators Posts: 9,722 Joined: 10-August 06 Member No.: 7 |
1) It appears that CODE <body mode="maker"> is the code to assign the name "maker" to the <body>? To clarify the HTML terminology: the example above has an attribute called MODE, with a value of "maker". But as already mentioned, no MODE attribute exists in the HTML specification (there is an INPUTMODE attribute, but that's likely not what you want). QUOTE And "mode" is the way to assign that name? No. But I'm not sure what you want to achieve with this value "maker"? You can certainly give the BODY element a CLASS attribute with the value "maker": CODE <body class="maker"> ...but since there's only one BODY element in every HTML document anyway, it's normally enough to just use the BODY selector in the CSS. QUOTE 2) It appears that CODE <div class="maker"> assigns that <div class> to the the <body> named "maker"?No. What you describe reminds me a little of Custom properties/variables, which I don't know much about. QUOTE 3) Does adding the "." to the name "maker" CODE .maker - tie this code to the body named "maker"?The period sign "." makes it a CLASS selector. If two HTML elements use the same CLASS attribute value they get the same styling: CODE .maker { color: blue; background: white; border: solid; padding: 1em; } .foo { color: red; background: yellow; } </style> </head> <body class="maker"> This BODY text should be blue. <div class="foo">This DIV text should be red. <div class="maker">This nested DIV text should be blue.</div> </div> (without its CLASS attribute value "maker", the nested DIV would inherit the styling of its parent DIV). QUOTE 4) It's not clear to me the difference between CODE .maker {...} and CODE .maker > div {...} The ">" character in the second example is called a Child combinator, and is used when you want the CSS rule to match only DIVs that are direct children of an element with the CLASS "maker". If it doesn't have to be a direct child you can use the Descendant combinator (a space between two selectors): CODE .maker div {...} |
bhs67 |
Apr 18 2024, 08:29 AM
Post
#4
|
Group: Members Posts: 9 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"> |
coothead |
Apr 18 2024, 09:28 AM
Post
#5
|
Advanced Member Group: Members Posts: 226 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, 09:41 AM
Post
#6
|
. Group: WDG Moderators Posts: 9,722 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
#7
|
Advanced Member Group: Members Posts: 226 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
#8
|
. Group: WDG Moderators Posts: 9,722 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
#9
|
Advanced Member Group: Members Posts: 226 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
#10
|
. Group: WDG Moderators Posts: 9,722 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
#11
|
Advanced Member Group: Members Posts: 226 Joined: 12-January 23 From: chertsey, a small town 25 miles south west of london, england Member No.: 28,743 |
coothead |
bhs67 |
Apr 23 2024, 08:56 AM
Post
#12
|
Group: Members Posts: 9 Joined: 17-April 24 Member No.: 29,168 |
I received this response from a Blockly forum:
---------------------------------------------------------------------- They are correct that "mode" is not a standard attribute. However, unless you are running your HTML through an HTML validator, this is unlikely to be a problem. It being nonstandard means the browser has no built-in reaction to the attribute being set, which is fine. CSS selectors that work on attributes will still work on non-standard attributes, which is the main thing we're doing with it here. If I were writing this app, I probably would have chosen a different approach, but I don't think there is anything wrong with the current one either. Using nonstandard attributes has become more common especially for popular frameworks like Angular and is now supported in custom elements. In the end, this is simply a quirk of the sample app that is used in the codelab. It is not actually related to the Blockly library at all, so you can either ignore it or you can change the app however you'd like to use a different approach to toggle between maker, edit, and blockly modes. ---------------------------------------------------------------------- |
Lo-Fi Version | Time is now: 6th October 2024 - 05:16 AM |