The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> What are the meanings of a mode name and .maker?
bhs67
post 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 {...}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
 
 Reply to this topicStart new topic
Replies
bhs67
post 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">
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 18 2024, 09:41 AM
Post #3


.
********

Group: WDG Moderators
Posts: 9,678
Joined: 10-August 06
Member No.: 7
QUOTE(bhs67 @ Apr 18 2024, 03:29 PM) *

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. unsure.gif

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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post 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
QUOTE(Christian J @ Apr 18 2024, 03:41 PM) *



The JS above adds the same MODE attribute to the BODY element,
which seems unnecessary if it's already present in the static HTML.



The JavaScript code is unnecessary and incorrect as is the HTML body attibute code.
As a matter of interest, the body element does not even need to be coded as this
example clearly shows...

CODE

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Untitled document</title>
</head>

Hello World

<script>
if( document.querySelector('title').textContent == 'Untitled document' ) {
    document.querySelector('body').style.backgroundColor = '#f00';
}
</script>

</html>

Attributes in any form for the body tag can serve no purpose.

coothead
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 18 2024, 11:36 AM
Post #5


.
********

Group: WDG Moderators
Posts: 9,678
Joined: 10-August 06
Member No.: 7
QUOTE(coothead @ Apr 18 2024, 05:22 PM) *

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post 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
QUOTE(Christian J @ Apr 18 2024, 05:36 PM) *


There might be special cases, such as using CLASS or ID to target a
particular HTML document's BODY element in an external stylesheet.



No need, see attachment...

Attached File  no_body.zip ( 786bytes ) Number of downloads: 433



coothead
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Posts in this topic
bhs67   What are the meanings of a mode name and .maker?   Apr 17 2024, 10:20 AM
coothead   [indent] Segments of index.html: [code] <body...   Apr 17 2024, 11:11 AM
Christian J   1) It appears that [code]<body mode="make...   Apr 17 2024, 02:13 PM
bhs67   Thanks for the clarifications! I inadvertent...   Apr 18 2024, 08:29 AM
Christian J   Does this explain the use of mode? The JS above ...   Apr 18 2024, 09:41 AM
coothead   [indent] The JS above adds the same MODE attribu...   Apr 18 2024, 10:22 AM
Christian J   As a matter of interest, the body element does no...   Apr 18 2024, 11:36 AM
coothead   [indent] There might be special cases, such as us...   Apr 18 2024, 11:56 AM
Christian J   [quote name='Christian J' post='147142' date='Apr...   Apr 18 2024, 12:49 PM
coothead   [indent] No, I meant if you have multiple HTML do...   Apr 18 2024, 05:07 PM
coothead   As previousl pointed out, there is [b]NO HTML at...   Apr 18 2024, 09:28 AM
bhs67   I received this response from a Blockly forum: --...   Apr 23 2024, 08:56 AM

« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Switch to: Standard · Switch to: Linear+ · Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 3rd June 2024 - 07:24 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC