# element Published articles for element. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## CSS fix to prevent orphan icons dropping to a new line DevFeed: [CSS fix to prevent orphan icons dropping to a new line]() Original publisher: [Read original article]() Author: Stanko Published: 2024-11-12T00:00:00Z Content type: tutorial Language: en Sources: [Stanko Tadić]() Topics: [CSS](), [Web Development](), [HTML](), [browser]() Tags: [browser](), [css](), [element](), [legibility](), [property]() ### AI overview This tutorial explains how CSS text wrapping can prevent short text or icons from becoming orphaned on a separate line. It presents text-wrap: balance and text-wrap: pretty, noting that pretty uses a slower layout algorithm and is not supported in Firefox or Safari at the time of writing. ### Source excerpt When an HTML element becomes too narrow, its content starts to wrap into multiple lines. This is intended behavior and works well in many cases. However, for short text, it doesn't look great when the last word or icon drops to the next line, becoming an orphan. For example, you might see something like this: Click here for more info It doesn't look great when the icon is left alone on its own row. Luckily, there's a simple CSS solution. Solution # Only thing we need to add is a single line of CSS: text-wrap: balance; This property tells the browser to wrap the text in a way that best balances the number of characters on each line, enhancing layout quality and legibility. The browser will calculate this for us, preventing orphaned icons or words. text-wrap: pretty # There is also the pretty value for text-wrap, which is even better. It works in a similar way, but the browser will use a slower algorithm that prioritizes better layout over speed. Unfortunately, at the time of writing, pretty is not supported in Firefox nor Safari. However, you can define both values, and browsers that don't support pretty will fall back to balance. text-wrap: balance; text-wrap: pretty; /* This will be ignored by browsers that don't support it. */ Demo # Here's a simple demo. Use the handle on the right to resize the element and see how text breaks with and without the balance property applied. Defaulttext-wrap: balancetext-wrap: pretty Unfortunately your browser doesn't support text-wrap: pretty. Click here for more info A somewhat longer text that will break into multiple lines ## My Advice to a Developer New to Accessibility DevFeed: [My Advice to a Developer New to Accessibility]() Original publisher: [Read original article]() Author: Eevis Panula Published: 2023-01-03T08:57:33.125000Z Content type: tutorial Language: en Sources: [Eevis Blog]() Topics: [Accessibility](), [Web Development](), [HTML](), [keyboard](), [markup]() Tags: [accessibility](), [accessible](), [advice](), [developer](), [development](), [element](), [elements](), [focus](), [html](), [html-elements](), [input](), [interaction](), [interactive](), [keyboard](), [learning](), [markup]() ### AI overview This beginner-oriented accessibility article recommends focusing on progress rather than perfection and introduces semantic HTML, keyboard navigation, and listening to people with disabilities. It explains that semantic elements communicate meaning to browsers and developers and support appropriate interaction, while a div styled as a button may work only for mouse users and may not be focusable or keyboard-accessible. ### Source excerpt Learning about accessibility for the first time can feel overwhelming. You start reading, and at some point, it hits you: There is so much to learn! And if you're like me and feel that it's your responsibility to make the things you create accessible, that might even make you feel anxious. And yes, there is a lot to learn regarding accessibility. But you don't need to know everything at once. As Meryl Evans reminds us in her tweet (and a blog post the tweet links to), it's about progress over perfection: https://twitter.com/merylkevans/status/1547635550466674692 So, here are some things I wish I had known when I first started learning accessibility. Heck, I wish I had known these things when I started learning web development! I'll share semantic HTML, keyboard navigation, and listening to people with disabilities. Learn Semantic HTML and Use It So, first thing: Learn semantic HTML. But what does it mean? Semantic HTML, or semantic markup, describes its meaning to the browser and developer in a human- and machine-readable way. So, with semantic elements, a human will know what the HTML element is about, and the browser knows what it should render and how it should behave when a user interacts with it. Here's an example: That button uses a semantic button-element. When it does so, the browser knows what it should do when the user either clicks or activates it with a keyboard or other input device. Here's an example of a non-semantic "button":
I look like a button
So, this "button" made out of div looks like a button and even has the onClick-handler. So, wouldn't a human recognize it as a button? Well, yes and no. It depends on the human. You see, this "button" works only for mouse users. As div is not an interactive element by nature, it doesn't handle interaction the same way as, for example, a button-element. When using a semantic button-element, that onClick-event pro ## CSS blocky people making waves DevFeed: [CSS blocky people making waves]() Original publisher: [Read original article]() Author: Stanko Published: 2022-11-10T00:00:00Z Content type: tutorial Language: en Sources: [Stanko Tadić]() Topics: [CSS](), [Web Components](), [HTML](), [Web Development]() Tags: [animate](), [code](), [components](), [css](), [element](), [html]() ### AI overview A tutorial on creating blocky people performing a stadium wave using only CSS. It explains how to build 3D boxes from HTML elements and CSS, then use Web Components templates to reduce the repeated HTML needed for each person. ### Source excerpt It all started with the code challenge in our office. The weekly theme was waves, and I tried to think outside of the box. After dropping a few ideas, I remembered the waves people do on stadiumsAccording to Wikipedia these are known as Mexican or stadium waves. So I made waves using CSS only (code is available on CodePen): I started without a real idea on how to do it. Obviously, I needed to create some people and animate them. 3D people would be nice, but as this was a weekly code challenge, I had to keep it simple. Blocky people, similar to characters in Minecraft, seemed like a good idea. Making them using Three.js felt too obvious, as I wanted something a little bit more unconventional and fun. CSS was definitely not made for something like this, which is why I wanted to try it out. Box # Blocky people are obviously made of blocks, so I needed to build some 3D boxes in CSS. There are many tutorials on creating a 3D box in CSS, so I'll try to keep this short. We'll need six elements to use as sides of the box. Each side needs to be appropriately sized, rotated and translated into its place.
Show HTMLHide HTML Here you can see the three steps in creating a CSS box: Size the sides appropriately Translate them into position Rotate them The box wrapper element is outlined in red and sides are outlined in blue. If you want to play with it, I created a standalone CodePen. As a bonus, here is a three-sided prism as well. WebComponents # Each box consists of seven HTML elements (a wrapper and six sides). And each person ended up being built from twelve boxes and some additional wrappers. That means that each person requires a lot of HTML to be written. To simplify things, we can use WebComponents. Web components are a pretty powerful tool, but in this case, we will only use their template capabi ## Eschewing Shadow DOM DevFeed: [Eschewing Shadow DOM]() Original publisher: [Read original article]() Author: Heydon Pickering Published: 2019-06-14T00:00:00Z Content type: article Language: en Sources: [The Every Layout Blog]() Topics: [Web Components](), [CSS](), [modern web development](), [React](), [styled-components]() Tags: [css](), [custom](), [element](), [react](), [styled-components]() ### AI overview An examination of styling problems encountered with Shadow DOM, including inconsistent universal styles, limited inheritance, slot restrictions, and specificity issues. The author proposes an experimental alternative for web components that namespaces and embeds prop-derived instance styles in the document head. ### Source excerpt Regarding styling, Shadow DOM is really good at one thing: preventing per-component styles from leaking out and affecting other parts of the document. Unfortunately, Shadow DOM also has a very opinionated way of preventing styles being applied from the parent document. Here is a roundup of the quirks and associated issues I've encountered: Shadow DOM styling issues Universal styles Some universal styles (using the * selector) are applied, and others are not. The color property appears to pierce shadow boundaries, but I've had no luck with box-sizing. Having to set box-sizing: border-box for each component is redundant. Inheritance Document styles are inherited in Shadow DOM. But inheritance only gets you so far, especially since not all properties are inheritable by default anyway. I've tried hacking things together with the explicit inherit keyword, but that seems to have no effect. Using the following is no good, because it forces every node to inherit every property from the parent. If had display: flex applied, every one of the component's descendants would adopt it. * { all: inherit; /* yikes */ } Slot restrictions For performance reasons, the ::slotted() selector, which allows you to style the Light DOM content of your component from within your Shadow DOM, only lets you affect child elements and not descendants at depth. This is a bit restrictive. Worse, you cannot seem to use sibling combinators like + or ~. None of the following works: ::slotted(*) + * /* Nope */ ::slotted(* + *) /* Nope */ ::slotted(*) + ::slotted(*) /* Nope */ Specificity In making layout components, I like to take a progressive approach: style the component and its Light DOM nodes in my document stylesheet, then enhance with instance-specific styles via props (attributes) in Shadow DOM. For a component instance that looks like this... ...I would apply the itemWidth value in the Shadow DOM using interpolation: `