symfonystation, to Symfony
@symfonystation@newsletter.mobileatom.net avatar
Nico3333fr, to CSS French
@Nico3333fr@mastodon.social avatar

En fait, l'IA, c'est surtout un accélérateur à conneries.

Tu discutes #CSS sérieusement avec des gens respectables, et le soir tu poses des paroles débiles sur un rock généré et ça donne ça https://suno.com/song/38862858-9034-4781-9fc8-6f6394f25e46

devontechnologies, to markdown
@devontechnologies@devontechnologies.com avatar

DEVONthink To Go 3.8.2 is here. It supports the PDF bookmarklet and no longer applies default styling to Markdown when you use your own CSS. The new version also shows fewer notifications, checks for broken file permissions, and improves VoiceOver support. https://buff.ly/3yl1yyB

mia, (edited ) to CSS
@mia@front-end.social avatar

Unexpected things can happen when you add containment (some elements completely collapse)! @stacy and I will discuss #CSS Container Queries in the real world on @OddBird's Winging It livestream this Thursday:

May 16 at 1pm ET/11am MT

https://www.youtube.com/watch?v=Ci2DLDQYup0

Send us your questions in advance or join us during the live stream!

css, to CSS
@css@front-end.social avatar

💡 CSS Tip!

Turn a simple input into single-digit inputs using a few lines of CSS. Useful for One-Time Password fields.
✅ No extra element (only one input element)
✅ Less than 15 CSS declarations
✅ Optimized with CSS variables

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

Online Version: https://css-tip.com/single-digit-inputs/

Showing the result of the linked demo. A One-Time password field using a single input element.

havn, to CSS
@havn@mas.to avatar

Can someone explain to me why we don’t have media queries for browser engines in ? Just pride?

I get that we, in a perfect world, wouldn't need it - because the standards were strong enough. But I live in the real world, and would prefer not to write shit like this:

--variable: 0.17rem;
@supports (text-wrap: pretty) {
--variable: 0.07rem;
}
@supports (-moz-appearance: none) {
--variable: 0.11rem;
}

Advice for doing this better is appreciated!

yuanchuan, to CSS
@yuanchuan@vis.social avatar

Chrome has a different behaviour from FF and Safari.

They used be the same. I'm not sure if the spec changes or Chrome has a bug in recent releases

https://codepen.io/yuanchuan/pen/bGydpjP

Source code grid { display: grid; width: 600px; height: 200px; background: ; grid-template-columns: repeat(10, 1fr); } grid > div { border: 2px solid ; width: 50%; aspect-ratio: 1; }

5t3ph, to CSS
@5t3ph@front-end.social avatar

After a 2-month hiatus (bloops) the Modern CSS newsletter will be dropping an epic issue tomorrow 👀

If you haven't kept on the latest in news lately, this is the issue to watch out for!

https://moderncss.dev/newsletter

jan_j, to CSS
@jan_j@chaos.social avatar
sarajw, to CSS
@sarajw@front-end.social avatar
cssbasics, to CSS
@cssbasics@hachyderm.io avatar

Handling The Indentation of a Treeview Component: "In a nutshell, the problem is to build a UI that contains nested components with an increasing indentation for each one. The problem is common on the web, but I will highlight the ones from Github, Figma, Adobe and more." https://ishadeed.com/article/tree-view-css-indent/

potatomeow, to CSS
@potatomeow@fosstodon.org avatar

it seems ascii art renders differently on different browser fonts, kinda breaks the graphics... looks like isn't as simple as i thought

mia, to CSS
@mia@front-end.social avatar

I updated my article about root containers container queries. At @OddBird we've found the simplest solution is:

  • no containment on root or body, since there are so many potential side effects
  • do contain all the top-level page elements: nav, header, main, footer etc

That provides some nearly top-level containers, while avoiding the issues. Have you run into this? How do you handle it?

https://www.oddbird.net/2023/07/05/contain-root/

j9t, to CSS
@j9t@mas.to avatar
mobileatom, to CSS
@mobileatom@flipboard.com avatar

The Times You Need A Custom @property Instead Of A CSS Variable.

https://www.smashingmagazine.com/2024/05/times-need-custom-property-instead-css-variable/?utm_source=flipboard&utm_medium=activitypub

Posted into Responsive Design, UX, UI, and more @responsive

chrismcolvin, to CSS
@chrismcolvin@mastodon.social avatar

I know I’m late to the party, but :has() is the best. Feels like I’m solving new problems daily with this little beauty.
#css #webdev #frontend

kizu, to CSS
@kizu@front-end.social avatar

tips for understanding and memorizing alignment stuff.

  • align vs justify: think of an inline flow, where justify keyword of text-align controls the text in an inline direction. And for align think of vertical-align, which controls it over the block axis.

  • items vs content: an “item” is something that can be controlled by itself, via -self properties. content is a single entity, where you align the whole chunk of things, without a way to override it per item.

jimniels, to random
@jimniels@mastodon.social avatar

CSS nesting is a bit tricky when it comes to progressive enhancement.

I’ve been bitten twice now by shipping some nested css and finding my layouts busted on devices that aren’t that old.

So I’m still doing a lot of non-nested CSS for personal projects. Maybe a few more years.

stvfrnzl,
@stvfrnzl@mastodon.online avatar

@jimniels same here! I've replaced the syntax with nested and while it worked on all major browsers (latest version), everything was broken when using an older

tixie, to CSS
@tixie@guerilla.studio avatar
bw, to random
@bw@social.lol avatar

I’m always looking for good CSS named-colors cheatsheets or references. This one is fun. Please send me ones you know of!

https://austingil.com/css-named-colors/

NeadReport,
@NeadReport@vivaldi.net avatar

@bw Probably not what you are looking for, but here is a website that allows you to create pixel art and then generate the CSS code for it.
https://kushagra.dev/lab/picssel-art/

inautilo, to webdev
@inautilo@mastodon.social avatar


The modern guide for making CSS shapes · Shapes with the smallest and most flexible code possible https://ilo.im/15yu2g


Freeplay, to firefox
@Freeplay@ilyamikcoder.com avatar

Firefox Onebar's repository has moved from Codeberg to https://git.gay/freeplay/Firefox-Onebar ! Along with some minor updates to the style :blobfoxfloofhappy:​

h4kor, to CSS German
@h4kor@chaos.social avatar

Apparently color-mix behave differently in and

Firefox screenshot

hmiron, to CSS
@hmiron@fosstodon.org avatar

Hey fellow people. I have an abstract question for you.

By what logic does a evolve?

Surely we can't build everything into one, so how do we decide what to build? Where to start from? A button?

My goal is to end up with a design system or collection of components that I compose into pages and pass the data into them.

remixtures, to webdev Portuguese
@remixtures@tldr.nettime.org avatar

: “If you’ve ever wondered how a website works and whether or not you could build your own, this book is for you. The Static Site Guide walks you through the process of building a website from scratch by using hands-on examples. You’ll learn what a website is and how some of the most popular website technology works. By the time you reach the end, you’ll have built your very own website, and you’ll know how to do it again on your own.” https://www.staticguide.org/

  • All
  • Subscribed
  • Moderated
  • Favorites
  • provamag3
  • rosin
  • thenastyranch
  • Durango
  • DreamBathrooms
  • ngwrru68w68
  • magazineikmin
  • cisconetworking
  • Youngstown
  • mdbf
  • slotface
  • osvaldo12
  • GTA5RPClips
  • kavyap
  • megavids
  • InstantRegret
  • everett
  • cubers
  • vwfavf
  • normalnudes
  • tacticalgear
  • tester
  • ethstaker
  • khanakhh
  • modclub
  • Leos
  • anitta
  • JUstTest
  • All magazines