Search results

setHTML(), Trusted Types and the Sanitizer API. Ollie Williams explains how the new setHTML() method and Sanitizer API help prevent XSS by safely inserting HTML into the DOM. Combined with the Trusted Types API, they provide a modern, configurable way to control what elements and attributes are allowed, eventually replacing libraries like DOMPurify. Supported in Firefox Nightly and Chrome Canary. #security #html

https://olliewilliams.xyz/blog/sanitizer/

Abandonware of the web: do you know that there is an HTML tables API?

Link: https://christianheilmann.com/2025/10/08/abandonware-of-the-web-do-you-know-that-there-is-an-html-tables-api/
Discussion: https://news.ycombinator.com/item?id=45781293

#html

Show HN: In a single HTML file, an app to encourage my children to invest

Link: https://roberdam.com/en/dinversiones.html
Discussion: https://news.ycombinator.com/item?id=45758421

#html

Hello Fediverse, hello Bits&Baeume,

I’ve moved recently, time for a (re)introduction — and a heartfelt Thank You! to @benBen

I am a writer, copywriter, online editor, and I generally write a lot; I design websites with plain HTML/CSS/JS or using WordPress and other CMS; occasionally I work as a speaker, podcast producer, sound designer — to mention the most important bits.

My blog: https://wernerprise.com/blog (mostly German, but I am considering making it bilingual at some point.)

Climate catastrophe is on my mind, degrowth close to my heart; capitalism needs a short leash!

Also, I still take SARS-CoV-2 and COVID-19 very seriously. Thus:

#SARSCoV2 #COVID19 #COVID #NoCOVID #LongCOVID #COVIDIsNotOver #WearAMask #TeamCaution #CleanAir
#NewHere #Intro #ClimateCatastrophe #Capitalism #WealthRedistribution #TaxTheRich #Democracy #AntiAI #AntiFa #StopConsumerism #WeAreThe99Percent
#HTML #CSS #JavaScript #Webdesign #WordPress

Hallo Fediverse, hallo Bits&Baeume,

ich bin umgezogen und erst seit ein paar Stunden hier auf dem neuen Server, deswegen eine kurze Vorstellung — und ein herzliches Dankeschön an @benBen

Ich bin Texter und Online-Redakteur, schreibe auch sonst viel; ich gestalte Websites in HTML, mit WordPress oder anderen CMS, arbeite außerdem gelegentlich als Sprecher, Podcast-Produzent, Sounddesigner – um mal die wesentlichen Dinge genannt zu haben.

Mein Blog: https://wernerprise.com/blog

Mir liegt die Klimakatastrophe auf der Seele und Degrowth (Décroissance) am Herzen; Kapitalismus braucht straffe Zügel!

Außerdem nehme ich nach wie vor SARS-CoV-2 und COVID-19 ernst. Daher:

#SARSCoV2 #COVID19 #COVID #NoCOVID #LongCOVID #COVIDIstNichtVorbei #WearAMask #MaskeAuf #DieMaskeBleibtAuf #TeamVorsicht #CleanAir
#NeuHier #Intro #Klimawandel #KlimaKatastrophe #Kapitalismus #Umverteilung #Reichensteuer #Demokratie #AntiKI #AntiFa #Konsumstop #WirSindDie99Prozent
#HTML #CSS #JavaScript #Webdesign #WordPress

Web devs can have a bit of JS, as a treat, but only if you behave.

(this is what behaving looks like)

#WebDev #NoJS #CSS #HTML

Je propose mes services en #télétravail et #téléassistance en #informatique / #réseaux et #systèmes / #télécommunications / #Internet / #Web.

#introduction

#linux #debian #qubesOS #tails #privacy #cybersecurity #linux #france #c++ #rustlang #php #python #css #html #sass #symfony #laravel…

Don't forget these tags to make HTML work like you expect

Link: https://blog.jim-nielsen.com/2025/dont-forget-these-html-tags/
Discussion: https://news.ycombinator.com/item?id=45719140

#html

when it's time to write the Good Web Apps™

#HTML #NoJS #WebDev

Getting the screen dimension with a simple calc? Yes, it's possible!

https://css-tip.com/screen-dimension/

We are still waiting for Firefox to join the game, and the code below will become the favorite one of many developers!

(Until then, there is another method with better support)

#CSS #HTML

How does the semantic html community feel about using the <details> element to “expand” into a form submission confirmation, when submitting “dangerous” operations, instead of a <dialog>? Notably, the thing I’m working on is currently fully JS-optional so far, and I would like to keep it that way.

EDIT: Oh it looks like <button> has command and commandfor, which can open a <dialog> now.

EDIT2: oops, but it's not baseline yet, and won't be for a while. It just released in preview for Safari and Firefox. ~sigh~

#HTML #JavaScript #webdev

Updated the interactive demo to include the "anchor-center" value. It's a special value different from "center" and is probably the one you will be using the most.

https://css-tip.com/position-area/

Example with position-area: top 👇

#CSS #HTML

A quick, beginner-friendly walkthrough on how to make a nice-looking, accessible image gallery and host it for free with Neocities.

https://stefanbohacek.com/blog/making-a-free-image-gallery-with-neocities-org/

#tutorial #gallery #ImageGallery #HTML #neocities #LearnToCode

Ready for another crazy demo? This time, I am considering the corner positions. Same HTML code and still 100% modern CSS!

Yes, Anchor Positioning is very cool. 🤩

https://css-tip.com/tooltip-anchor-3/

The code is a bit hard to decipher, but I am working on articles to explain all the magic 👍

#CSS #HTML

I said 36 positions, but in reality, they are even more because within each position, we can control the alignment of the element using justify-self and align-self.

36 positions, 2 axes, 4 alignment values per axis. I let you do the count! 🫣

#CSS #HTML

Previously we wrote about Reciprocate, a library for adding signal-based reactivity to server-rendered #HTML #WebComponents.

Pretty cool problems to have solved, but what if you wanted more dynamic client-side smarts and the ability to write declarative templates with a trusty html`` function?

Tada! 🎉 Thanks to Joe Pea @trusktrJoe Pea that #WebDev problem has also been solved. Wire up these two solutions together, and you'll be authoring new UI components using familiar DX. 🙌
https://thathtml.blog/2025/10/nimble-html-adds-great-dx-to-ui-components/

💡 CSS Tip!

In Anchor Positioning, you can use position-area to place an element relatively to its anchor, but there are 36 different positions !? 👀

No one can memorize them all, so I've created an interactive demo where you can select a position and get its code.

https://css-tip.com/position-area/

#CSS #HTML

For those who wanted to see the code behind my CSS-only magical sticky auto-expanding sidebar nav in action, I've put together a little CodePen for you! I've narrowed down the relevant code to just what's needed to get this to work, with some very minimal JavaScript to improve the accessibility of it! I've even left you a little challenge in there for you, let me see how you accomplish it!

#css #html #javascript #webdev #a11y

https://codepen.io/Snugug/pen/VYezVKr
https://mas.to/@snugug/115259058092836805

I feel that "#JavaScript is purely terrible and should be obliterated from the planet because modern #CSS is enough" crowd often miss the role it plays in dictating the weight of importance for new features that flow into native #HTML and #CSS.

Its right there in chapter four of "HTML5 for Web Designers" (Jeremy Keith)

Developers hack together a solution with #JS and eventually browser vendors go "oh snap, yeah, maybe we *could* just have CSS for popular thing" and out it comes.

You can't have amazing CSS without browser vendors understanding what is important for developers. Its a lovely, beautiful feedback loop.

#WebDev #HTML

HTML's Best Kept Secret: The Output Tag

Link: https://denodell.com/blog/html-best-kept-secret-output-tag
Discussion: https://news.ycombinator.com/item?id=45547566

#html

»HTML’s Best Kept Secret — The <output> Tag:
Every developer knows <input>. It’s the workhorse of the web. But <output>? Most have never touched it. Some don’t even know it exists. […]«
— by @denodell

You never stop learning and you can't know everything about as a WebDev. Nice to see how you can use the HTML interface actiev.

🧑‍💻 https://denodell.com/blog/html-best-kept-secret-output-tag

#html #javascript #output #webdev #web #input #htmlform #form #interactive

💡 CSS Tip!

A simple line of modern CSS to create a conditional Border Radius. The value will adjust based on either the container width or screen width.

https://css-tip.com/conditional-border-radius/

#CSS #HTML

lolwut wow #TIL #HTML #WebDev

Ask HN: What is nowadays (opensource) way of converting HTML to PDF?

Discussion: https://news.ycombinator.com/item?id=45404760

#html

A more advanced 3D box where you can control the depth, angle, and perspective! 🤩

https://css-tip.com/3d-box/

Built using only the border properties and modern CSS features.

#CSS #HTML

A 3D box with a simple CSS code.

Demo: https://codepen.io/t_afif/full/EaPVaMB via @codepen

#CSS #HTML

💡 CSS Tip!

Ready for the new corner-shape property? Learn how you can use it to create most of the common CSS Shapes without hassle.

https://css-tip.com/corner-shape/

All you have to do is adjust the border-radius. Yes, border-radius!

#CSS #HTML

🆕 blog! “Targetting specific characters with CSS rules”

You can't. There is no way to use CSS to apply a style to every letter "E". It simply can't be done.

At least, that's what they want you to think…

What if I told you there was a secret and forbidden way to target specific characters in text and apply some styles to them?

As part of my experiments in creating a "drunk" C…

👀 Read more: https://shkspr.mobi/blog/2025/09/targetting-specific-characters-with-css-rules/
⸻
#css #HTML

Bit late for a #intro, but better late than never.

I'm a high school student. I'm a farm kid, interested in #farming #ranching #agriculture #ffa #4H

I'm #catholic and had the opportunity to visit the #vatican #rome pre-covid.

I'm politically #conservative, willing to talk to people who disagree, but not interested in political arguments.

I'm interested in #linux and #foss. Currently running #manjaro with #kde on my main machine. I've played with #selfhosting on #raspberrypi. Do some programming: I'm not bad with #python, okay with #html #css #js

I also make #videos. Mostly farm life, but I make videos for my clubs, church, school projects, too. I fly a #dji #mavic, and use a #gopro. Still have a lot to learn, but I'm pretty proud of my work.

Granary https://granary.io/ #activitypub #converter #convert #atom #feed #html #json #RSS

Just Use HTML

Link: https://gomakethings.com/just-use-html/
Discussion: https://news.ycombinator.com/item?id=45261480

#html

By correctly understanding all the alignment mechanisms, you can unlock "secret" ways to center an element inside a container.

Demo: https://codepen.io/t_afif/pen/dPYBPGm via @codepen.io

flex-wrap and space-around?! Yes, it's valid and it works!

Don't miss my exploration for more alignment tricks: https://css-tip.com/explore/alignment/

#CSS #HTML

Imagine a web page that loads instantly, deploys effortlessly, and never needs a security update.


https://joeldare.com/why-im-writing-pure-html-and-css-in-2025 #webstandards #html #css

Is it just me? Keyboard focus is completely broken by placing a <details> inside an element with popover. Browsers each break it in their own way #HTML

Is your website missing out on one of #HTML’s easiest yet most powerful tools? The lang attribute takes just seconds to add, but it makes a massive difference for #accessibility, SEO, and how your content displays. @webi18nW3C Internationalization, i18n

In this video, @xfqFuqiao Xue, who leads @w3cWorld Wide Web Consortium's #Internationalization activity, breaks down exactly what the language attribute does and demonstrate why skipping it can have real consequences. @webi18nW3C Internationalization, i18n

🎬 https://youtu.be/G3OwTPJo_Kw

Definisjonsliste, type HTML

Fra HTML-standardens eksempler for dl-elementet

Café ou Chocolat Liégeois

3.50 <data itemprop="priceCurrency" value="EUR">€</data>

2 boules Café ou Chocolat, 1 boule Vanille, sauce café ou chocolat, chantilly

Américaine

3.50 <data itemprop="priceCurrency" value="EUR">€</data>

1 boule Crème brûlée, 1 boule Vanille, 1 boule Caramel, chantilly

eller

Apartment, n.

An execution context grouping one or more threads with one or more COM objects.

Flat, n.

A deflated tire.

Home, n.

The user’s login directory.

@nixCraftnixCraft 🐧 Hm.
<3h later> 💾 💻

I wrote myself a "tool" using 3 languages (all #C none C#)-based to resolve and translate "proficient" to my language.

Then I nodded & smiled, while inventing `$poems-o-code` in whitespace-and-esoteric-languages: brain-and-🤪f*ck
meets Shakespeare;

https://github.com/imihajlow/emojifuck/blob/master/examples/hello.bf

Slowly coming down: From Python to Perl to Ba(t)sh - then Markup, then -down, #HTML 1-2-3-4-5 #css3 even #SVG then
{ pause(); }

Eh...
> What was your question again?
> 🤓 😎 ❓

Screenreader HTML support look up app

#HTML #screenReaders #Webstandards

cc/ @kazuhito

https://html5accessibility.com/stuff/2025/09/08/screenreader-html-support-look-up-app/

Pico CSS – Minimal CSS Framework for Semantic HTML

Link: https://picocss.com
Discussion: https://news.ycombinator.com/item?id=45161855

#css #html

"One notable difference between #X11 and #W3C is the case of “Gray” and its variants.

In #HTML, “Gray” is specifically reserved for the 128 triplet (50% gray). However, in X11, “gray” was assigned to the 190 triplet (74.5%), which is close to W3C “Silver” at 192 (75.3%), and had “Light Gray” at 211 (83%) and “Dark Gray” at 169 (66%) counterparts.

As a result, the combined #CSS 3.0 color list that prevails on the web today produces “Dark Gray” as a significantly lighter tone than plain “Gray”, because “Dark Gray” was descended from X11 – for it did not exist in HTML nor CSS level 1 – while “Gray” was descended from HTML." #til #Gray #DarkGray #Grey

🆕 blog! “What about using rel="share-url" to expose sharing intents?”

Let's say that you've visited a website and want to share it with your friends. At the bottom of the article is a list of popular sharing destinations - Facebook, BlueSky, LinkedIn, Telegram, Reddit, HackerNews etc.

You click the relevant icon and get taken to the site with the…

👀 Read more: https://shkspr.mobi/blog/2025/08/what-about-using-relshare-url-to-expose-sharing-intents/
⸻
#HTML #standards #webdev

Dear Mastodon,

I am writing to tell you all about my wonderful and brand new HW HTML Drafting Project. It is an #opensource #HTML drafting software that works directly inside of the browser. It is available on GitHub at:

https://github.com/dckimMysteryAuthor/HW-HTML-Drafting-Project

It is also available in the form of a full featured demo at both:

https://dckim.com/HW_project_online.html

and

https://HDUB.neocities.org

It's a wonderful program used to draw HTML just like a traditional drafting program.

Keyboard Like VI, Drag Images In

-dckimGUY

Show HN: JavaScript-free (X)HTML Includes

Link: https://github.com/Evidlo/xsl-website
Discussion: https://news.ycombinator.com/item?id=44988271

#html #javascript

What about using rel="share-url" to expose sharing intents?

https://shkspr.mobi/blog/2025/08/what-about-using-relshare-url-to-expose-sharing-intents/

<html><head></head><body>

Let's say that you've visited a website and want to share it with your friends. At the bottom of the article is a list of popular sharing destinations - Facebook, BlueSky, LinkedIn, Telegram, Reddit, HackerNews etc.

You click the relevant icon and get taken to the site with the sharing details pre-filled.

The problem is, every different site has a different intent for sharing links and text. For example:

• https://www.facebook.com/sharer.php?u=…&t=…
• https://www.linkedin.com/sharing/share-offsite/?url=…
• https://bsky.app/intent/compose?text=…
• https://www.threads.net/intent/post?url=…&text=…
• https://www.reddit.com/submit?url=…&title=…

As you can see, some only allow a URL, some text and a URL, and some just a plain text which could contain the URl. A bit of a mess! It's probably impossible to get every site to agree on a standard for their sharing intent. But there could be a standard for exposing their existing sharing mechanism.

That's the proposal from Ben Werdmuller with "Share Openly".

ShareOpenly knows about most major social networks, as well as decentralized platforms like Mastodon, Bluesky, and Known.

However, if ShareOpenly is having trouble sharing to your platform, and if your platform supports a share intent, you can add the following metatag to your page headers:

<link rel="share-url" href="https://your-site/share/intent?text={text}">

Where https://your-site/share/intent?text= is the URL of your share intent.

The special keyword {text} will be replaced with the URL and share text.

I think that's a pretty nifty solution.

For sites which take a URl and an (optional) title, the meta element looks like:

 HTML<link rel="share-url" href="https://www.facebook.com/sharer.php?u={url}&t={text}"><link rel="share-url" href="https://lemmy.world/create_post?url={url}&title={text}">

For those which only take URl, it looks like:

 HTML<link rel="share-url" href="https://www.linkedin.com/sharing/share-offsite/?url={url}">

It's slightly trickier for sites like Mastodon and BlueSky which only have a text sharing field and no separate URl. The current proposal is just to use the text. For example

 HTML<link rel="share-url" href="https://bsky.app/intent/compose?text={text}">

But it could be something like

 HTML<link rel="share-url" href="https://mastodon.social/share?text={text}%0A{url}">

What Next?

The HTML specification has this to say about adding new link types:

Extensions to the predefined set of link types may be registered on the microformats page for existing rel values.

Adding to that page merely requires a formal specification to be written up. After that, some light lobbying might be needed to get social networks to adopt it.

So, I have three questions for you:

1. Do you think <link rel="share-url" is a good idea for a new standard?
2. What changes, if any, would you make to the above proposal?
3. Would you be interested in using it - either as a sharer or sharing destination?

Please leave a comment in the box - and remember to hit those sharing buttons!

</body></html>

#HTML #standards #webdev

Just sharing the very bare-bones script I use to make static websites from markdown files. Currently use this for both the https://httpd.rocks and https://openbased.xyz sites:

https://codeberg.org/btxx/mdhtml

#markdown #html #web

Hello!

I am an artist and professor of Creative Technologies at Virginia Tech. In my work, I focus on the ways technologies of visualization and control intersect with and threaten #trans lives.

I work in #creativecode, #sculpture, #writing, #artistbooks, and more. Lately I have been doing a lot of #webdev for my projects and in my teaching.

Earlier this year, I combined my #HTML / #CSS / #JavaScript teaching resources into a single (free and open) site that I am really proud of:

https://byhand.website

I am also interested in #horror, #scifi, #solarpunk, #permacomputing, #historyoftechnology, #transstudies, #maps, #archives, #zines, and #ttrpgs.

#introductions

Show HN: PlutoPrint – Generate PDFs and PNGs from HTML with Python

Link: https://github.com/plutoprint/plutoprint
Discussion: https://news.ycombinator.com/item?id=44966170

#python #html

Chrome intends to remove XSLT from the HTML spec

Link: https://github.com/whatwg/html/pull/11563
Discussion: https://news.ycombinator.com/item?id=44952185

#chrome #html