#indieweb mastodon.social/tags/indieweb
While an HTML style element for inline CSS needs nothing but simple start and end tags (as of HTML5 and later)

<style>
p { color: red }
</style>

a more robust style element requires a precise series of overlapping code comments.

Here is the answer if you want a code snippet to copy & paste

<style><!--/*--><![CDATA[*/
p { color: red } /* you may delete this sample style rule */
/*]]><!--*/--></style>


Here is why:

1. Not all HTML processors are CSS processors. While all modern browsers know how to parse CSS in style elements inside HTML, it is still quite reasonable for people to build HTML processors that do not, and many exist. There are plenty of ways to errantly or deliberately misplace markup inside a style element, like in a CSS comment, that such processors will not see, that can break them and cause unexpected and different results in different processors. Strictly speaking any use of > child combinator selector syntax should also be HTML escaped (as &gt;) inside a style elment.

Thus it makes your HTML more parseable, by more processors, if you can hide the entirety of the style sheet inside the style element from such processing, including any child combinators. A CDATA section does exactly that:

<style><![CDATA[
p { color: orange } /* CDATA allows a </style> here to not close the element */
body > p { margin: 1em } /* CDATA also allows an unescaped > child combinator */
]]></style>


2. However CSS syntax does not recognize a CDATA directive (even as of the latest published CSS Syntax Module Level 3¹ or editor's draft² as of this writing). CSS parsers may very well treat a CDATA directive as a syntax error that invalidates the subsequent style rule.

Thus we must hide the CDATA directive, its opening and closing markup, from CSS parsers.  CSS code comments /* ... */ can do exactly that:

<style>/*<![CDATA[*/
p { color: orange } /* CDATA allows a </style> here to not close the element */
body > p { margin: 1em } /* CDATA also allows an unescaped > child combinator */
/*]]>*/</style>


3. This is close but still exposes HTML processors that do not process CSS to a minimal bit of content, the CSS comment opener and closer that are outside the CDATA section:

/* */

This recently showed up in a draft of the This Week in The #IndieWeb newsletter³, because portions of it are automatically constructed by parsing the HTML of MediaWiki pages for content, and one of those used a MediaWiki template that included a minimal style element to style the marked up content inserted by the template. A draft of the newsletter was showing raw CSS, extracted as text from the style element by the CSS-unaware parser extracting content. I was able to hide nearly all of it using CSS comments around the CDATA section opener and closer. Except for that little bit of CSS comment noise outside the CDATA section: /* */

Fortunately there is one more tool in our toolbox that we can use. Simple HTML/SGML comments <!-- --> are ignored at the start and end of style sheets⁴ (noted there as CDO-token⁵ and CDC-token⁶), and thus we can use those to hide the last two remaining CSS comment pieces that were leaking out, like this: <!-- /* --> and <!-- */ -->. Note that the portion of the HTML comment directives that are inside CSS comments are ignored by CSS processors, which is why this works for both processors that parse CSS and those that do not.

This last addition produces our answer, with no fewer than three different comment mechanisms (CDATA, CSS, HTML/SGML), overlapping to hide each other from different processors:

<style><!--/*--><![CDATA[*/
p { color: orange } /* CDATA allows a </style> here to not close the element */
body > p { margin: 1em } /* CDATA also allows an unescaped > child combinator */
/*]]><!--*/--></style>

By replacing those informative style rules with a style rule to be deleted, we have recreated the code snippet to copy & paste from the top of the post:

<style><!--/*--><![CDATA[*/
p { color: red } /* you may delete this sample style rule */
/*]]><!--*/--></style>

Q.E.D.


Afterword:

If you View Source on this original permalink or my home page you can see the more robust style element in a real world example, following the IndieWeb Use What You Make⁷ principle.

#CSS #style #styleElement #styleSheet #HTML #HTML5 #CSSsyntax #codeComments #CDATA #SGML #CSScomment #HTMLcomment #SGMLcomment


Glossary:

CDATA
  https://en.wikipedia.org/wiki/CDATA
CSS — Cascading Style Sheets
  https://en.wikipedia.org/wiki/CSS
HTML — HyperText Markup Language
  https://en.wikipedia.org/wiki/HTML
HTML5
  https://en.wikipedia.org/wiki/HTML5
IndieWeb Principles
  https://indieweb.org/principles
MediaWiki
  https://en.wikipedia.org/wiki/MediaWiki
original permalink
  https://indieweb.org/original_permalink
Q.E.D.
  https://en.wikipedia.org/wiki/Q.E.D.

References:

¹ https://www.w3.org/TR/css-syntax-3/
² https://drafts.csswg.org/css-syntax/
³ https://indieweb.org/this-week-in-the-indieweb
⁴ https://www.w3.org/TR/css-syntax-3/#stylesheet-diagram
⁵ https://www.w3.org/TR/css-syntax-3/#CDO-token-diagram
⁶ https://www.w3.org/TR/css-syntax-3/#CDC-token-diagram
⁷ https://indieweb.org/use_what_you_make
Tantek Çelik tantek.com
While an HTML style element for inline CSS needs nothing but simple start and end tags (as of HTML5 and later)

<style>
p { margin:0 }
</style>

a more robust style element requires a precise series of overlapping code comments.

Here is the answer if you want a code snippet to copy & paste

<style><!--/*--><![CDATA[*/
p { margin:0 } /* you may delete this sample style rule */
/*]]><!--*/--></style>


Here is why:

1. Not all HTML processors are CSS processors. While all modern browsers know how to parse CSS in style elements inside HTML, it is still quite reasonable for people to build HTML processors that do not, and many exist. There are plenty of ways to errantly or deliberately misplace markup inside a style element, like in a CSS comment, that such processors will not see, that can break them and cause unexpected and different results in different processors. Strictly speaking any use of > child combinator selector syntax should also be HTML escaped (as &gt;) inside a style elment.

Thus it makes your HTML more parseable, by more processors, if you can hide the entirety of the style sheet inside the style element from such processing, including any child combinators. A CDATA section does exactly that:

<style><![CDATA[
p { margin:0 } /* CDATA allows a </style> here to not close the element */
body > p { margin:1em } /* CDATA allows an unescaped > child combinator */
]]></style>


2. However CSS syntax does not recognize a CDATA directive (even as of the latest published CSS Syntax Module Level 3¹ or editor's draft² as of this writing). CSS parsers may very well treat a CDATA directive as a syntax error that invalidates the subsequent style rule.

Thus we must hide the CDATA directive, its opening and closing markup, from CSS parsers.  CSS code comments /* ... */ can do exactly that:

<style>/*<![CDATA[*/
p { margin:0 } /* CDATA allows a </style> here to not close the element */
body > p { margin:1em } /* CDATA allows an unescaped > child combinator */
/*]]>*/</style>


3. This is close but still exposes HTML processors that do not process CSS to a minimal bit of content, the CSS comment opener and closer that are outside the CDATA section:

/* */

This recently showed up in a draft of the This Week in The #IndieWeb newsletter³, because portions of it are automatically constructed by parsing the HTML of MediaWiki pages for content, and one of those used a MediaWiki template that included a minimal style element to style the marked up content inserted by the template. A draft of the newsletter was showing raw CSS, extracted as text from the style element by the CSS-unaware parser extracting content. I was able to hide nearly all of it using CSS comments around the CDATA section opener and closer. Except for that little bit of CSS comment noise outside the CDATA section: /* */

Fortunately there is one more tool in our toolbox that we can use. Simple HTML/SGML comments <!-- --> are ignored at the start and end of style sheets⁴ (noted there as CDO-token⁵ and CDC-token⁶), and thus we can use those to hide the last two remaining CSS comment pieces that were leaking out, like this: <!-- /* --> and <!-- */ -->. Note that the portion of the HTML comment directives that are inside CSS comments are ignored by CSS processors, which is why this works for both processors that parse CSS and those that do not.

This last addition produces our answer, with no fewer than three different comment mechanisms (CDATA, CSS, HTML/SGML), overlapping to hide each other from different processors:

<style><!--/*--><![CDATA[*/
p { margin:0 } /* CDATA allows a </style> here to not close the element */
body > p { margin:1em } /* CDATA allows an unescaped > child combinator */
/*]]><!--*/--></style>

By replacing those informative style rules with a style rule to be deleted, we have recreated the code snippet to copy & paste from the top of the post:

<style><!--/*--><![CDATA[*/
p { margin:0 } /* you may delete this sample style rule */
/*]]><!--*/--></style>

Q.E.D.


Afterword:

If you View Source on this original permalink or my home page you can see the more robust style element in a real world example, following the IndieWeb Use What You Make⁷ principle.

#CSS #style #styleElement #styleSheet #HTML #HTML5 #CSSsyntax #codecomments


Glossary:

CDATA
  https://en.wikipedia.org/wiki/CDATA
CSS — Cascading Style Sheets
  https://en.wikipedia.org/wiki/CSS
HTML — HyperText Markup Language
  https://en.wikipedia.org/wiki/HTML
HTML5
  https://en.wikipedia.org/wiki/HTML5
IndieWeb Principles
  https://indieweb.org/principles
MediaWiki
  https://en.wikipedia.org/wiki/MediaWiki
original permalink
  https://indieweb.org/original_permalink
Q.E.D.
  https://en.wikipedia.org/wiki/Q.E.D.

References:

¹ https://www.w3.org/TR/css-syntax-3/
² https://drafts.csswg.org/css-syntax/
³ https://indieweb.org/this-week-in-the-indieweb
⁴ https://www.w3.org/TR/css-syntax-3/#stylesheet-diagram
⁵ https://www.w3.org/TR/css-syntax-3/#CDO-token-diagram
⁶ https://www.w3.org/TR/css-syntax-3/#CDC-token-diagram
⁷ https://indieweb.org/use_what_you_make
#IndieWeb #CSS #style #styleElement #styleSheet #HTML #HTML5 #CSSsyntax #codecomments
#indieweb mastodon.social/tags/indieweb

The “IndieWeb” feels like coming home

In reply to: Nathaniel Daught

The IndieWeb is a movement to return to actually owning and controlling your digital presence like we did 20+ years ago.

The “IndieWeb” feels like coming home, Nathaniel Daught

It is like you read my mind. For me, IndieWeb – especially WebMention – has felt like reclaiming what we lost in our rush into the walled gardens of privately owned social media. The IndieWeb is a web of personal connections, I feel. Those walled gardens were never home. This is.

This is home.

#IndieWeb #WebMention
@immarisabel indieweb.social/@immarisabel

I have my first guestbook entry! From a real visitor! Not a spammer! (blocked 3 Russian ips by now) ❤️ She made my evening 😭. #indieweb #smallweb
@Quinn9282 mas.to/@Quinn9282

The #RSS protocol launched 25 years ago today on March 15, 1999! :rss:

...And it's still cruising on to this day! 😁

https://en.wikipedia.org/wiki/RSS

#Indieweb #SmallWeb #Blogs
@inautilo mastodon.social/@inautilo

#Business #Anniversairies
RSS was released 25 years ago today · Born on March 15, 1999, and still alive and kicking https://ilo.im/15y9wc

_____
#RSS #Newsfeed #OpenWeb #IndieWeb #Website #Blog #Content #Development #WebDev #Frontend
@nhoizey mamot.fr/@nhoizey

🔗 “Links Worth Sharing” by @matthiasott

#IndieWeb

⚓️ https://nicolas-hoizey.com/links/2024/03/15/links-worth-sharing/
@mgdelacroix social.ctrlz.es/@mgdelacroix

@trinux @AbsluteBeginner yo creo que hay espacio para navegadores más sencillos, e iniciativas tipo #indieWeb / #webSencilla e incluso protocolos como #gopher y #gemini, pero necesitamos una alternativa a Chrome para hacer trámites en el Ministerio de turno o tener una videollamada, y negar la mayor nos arrastra al monopolio de Google.

Hay que buscar una solución para una alternativa generalista, al margen de lo cómodos que nos sintamos en nuestro nicho (y me incluyo, que yo soy de FFX o eww)
@cory social.lol/@cory

🔗: The “IndieWeb” feels like coming home #Tech #IndieWeb #WebDev https://daught.me/blog/2024/indie-web/
@stefan stefanbohacek.online/@stefan

Hey, if you have a few minutes, I'd appreciate help making some examples of simple personal web pages made with https://simplepagebuilder.app that I can feature on the site.

More details: https://stefanbohacek.online/@stefan/112095377362949802

Thank you!

#indieweb #PersonalWebsite
@adele phpc.social/@adele

Any candidates to try this brand-new static sites hosting platform ?

https://pages.casa/

Yes, I need a logo for it ! This 🏠 is just 🤢 😅
I accept your proposition 😘

#indieweb #smolweb #smallweb
@nfd social.lol/@nfd

#Webmention might be the next thing I want to get setup on my site… 🤔

https://rknight.me/blog/adding-webmentions-to-your-site/

#Eleventy #IndieWeb #SmallWeb #Neocities
@jcrabapple dmv.community/@jcrabapple

Link Drop - March 15, 2024 - Cool As Heck

https://cool-as-heck.blog/posts/link-drop-march-15-2024

#indieweb #linkdrop
@byjp hachyderm.io/@byjp

@casraf @brentsimmons Oh nice! I’d definitely be interested in seeing MicroSub supported too; it’s a relatively new protocol, but it’s super interesting and deeply connected with the #IndieWeb movement! https://indieweb.org/Microsub
@mauricerenck mastodon.online/@mauricerenck

I put together a list of all the website directories I know by now. You can submit your own personal website to them and of course find other cool sites:

https://maurice-renck.de/blog/2024/website-directories

#openweb #indieweb #directory #PersonalSites
#indieweb mastodon.social/tags/indieweb

❤️ https://starrwulfe.xyz/2024/02/on-the-subject-of-connecting-federated-social-media-networks/

So much this.

https://beko.famkos.net/2024/03/15/15629113/

#ActivityPub #IndieWeb
Neil Mather doubleloop.net

2024-03-14

Read More
@pd pkm.social/@pd

This weekend’s #indieweb tinkering on the #jekyll site:

- adding #IndieAuth
- adding #WebMentions

Wish me luck.
@nrchtct vis.social/@nrchtct

RSS

My all-time favorite RSS reader is NetNewsWire by @brentsimmons!

It runs on Apple desktop computers and mobile devices, syncs via various services, and is free and open source.

And it comes with a special feature for distraction-free reading: the magical reader view that can be enabled by default on a per-feed basis. So handy!

https://netnewswire.com

#NetNewsWire #RSS #RSSReader #OpenWeb #IndieWeb #opensource
Hollie Baggins-Kenobi eilloh.net
Someone just posted a link to an IndieWeb article by a guy who is very big with IndieWeb folks, and I get why, I follow him too. But he talks about how there’s “some” truth to the idea that IndieWeb isn’t accessible to non-nerds, and that’s why we need more things like Indiekit. I’m thinking oh wow, we ha... eilloh.net