The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> What are the meanings of a mode name and .maker?
bhs67
post Apr 17 2024, 10:20 AM
Post #1





Group: Members
Posts: 3
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
coothead
post Apr 17 2024, 11:11 AM
Post #2


Advanced Member
****

Group: Members
Posts: 206
Joined: 12-January 23
From: chertsey, a small town 25 miles south west of london, england
Member No.: 28,743
QUOTE(bhs67 @ Apr 17 2024, 04:20 PM) *


Segments of index.html:
CODE

<body mode="maker">

and

<div class="maker">




There is no HTML attribute "mode"

Here is the full list of them...

HTML attribute reference

...for you to check.

As for...
CODE
<div class="maker">

...well, it just means that this particular HTML element has class="maker" applied to it.

This CSS...
CODE

.maker {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  height: 460px;
  width: 400px;
}

...would be applied to any element with the attribute class="maker".

...while this CSS...
CODE

.maker > div {
  display: flex;
  justify-content: space-between;
}

...would be applied to any div element which is a child of the element with the attribute class="maker".

Example
CODE

<div class="maker">  /* in this case it is the parent */
  <div>
    I am a child element
  </div>
</div>


coothead
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 17 2024, 02:13 PM
Post #3


.
********

Group: WDG Moderators
Posts: 9,663
Joined: 10-August 06
Member No.: 7
QUOTE(bhs67 @ Apr 17 2024, 05:20 PM) *

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 {...}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
bhs67
post Apr 18 2024, 08:29 AM
Post #4





Group: Members
Posts: 3
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
coothead
post Apr 18 2024, 09:28 AM
Post #5


Advanced Member
****

Group: Members
Posts: 206
Joined: 12-January 23
From: chertsey, a small town 25 miles south west of london, england
Member No.: 28,743

As previousl pointed out, there is NO HTML attribute mode. IPB Image

Consequently, this...
CODE

document.body.setAttribute('mode', 'maker');

...is total nonsense and it's author really needs to learn correct
HTML coding before messing it around with JavaScript. IPB Image

coothead
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 #6


.
********

Group: WDG Moderators
Posts: 9,663
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 #7


Advanced Member
****

Group: Members
Posts: 206
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 #8


.
********

Group: WDG Moderators
Posts: 9,663
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 #9


Advanced Member
****

Group: Members
Posts: 206
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: 133



coothead
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 18 2024, 12:49 PM
Post #10


.
********

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

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.


[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.)
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post Apr 18 2024, 05:07 PM
Post #11


Advanced Member
****

Group: Members
Posts: 206
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, 06:49 PM) *


No, I meant if you have multiple HTML documents, each with a different
BODY CLASS value.



Of course, in that case id and or class attributes would be applicable.
Also the id attribute would be essential for a "Got to top" link at the
bottom of a page.

My beef has always been about the non existent attribute mode. IPB Image

coothead
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
bhs67
post Apr 23 2024, 08:56 AM
Post #12





Group: Members
Posts: 3
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.
----------------------------------------------------------------------
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

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

 

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

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

- Lo-Fi Version Time is now: 30th April 2024 - 03:20 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC