Cascading Style Sheets

davidbisset,
@davidbisset@phpc.social avatar

.counter_with_drawers {
margin-left: -40px;
}

#CSS #memes

XavCC, French
@XavCC@todon.eu avatar

Question

Comment faire un rendu propre d'iframe de carte umap dans un html ?

pour rendre un iframe de carte umap qui reste au centre de l'écran (sous h1 & h2, au dessus de footer) bien joli sympa ?

J'ai que du CSS et du HTML et je ne veux que ça !

emmanuelc, French
@emmanuelc@mamot.fr avatar

Dites, développeuses z'et développeurs, régulièrement, dans mon cercle professionnel direct, j'entends dire que vous n'aimez pas (voire ).
Question sérieuse et qui n'appelle pas à réveiller quelconque troll ou débat sans fin : pourquoi n'aimez-vous pas ce langage ?
Qu'est-ce qui vous chiffonne, vous rebute ?
D'où vient votre éventuel manque d'intérêt ?
J'ai déjà des éléments de réponse proches de moi, mais je suis curieux d'élargir la question ici.

nhoizey,
@nhoizey@mamot.fr avatar

@notabene à l’occasion, on peut en causer de vive voix, sur des exemples concrets, si tu veux.

Je peux te montrer les usages que j’en fait déjà, et toi les cas où tu voudrais le faire.

@emmanuelc @karlcow

nhoizey,
@nhoizey@mamot.fr avatar

@Monolecte mais n’est-on pas justement « expert grand Jedi du bousin » quand on accepte d’être humble devant ces riches évolutions, de les utiliser quand l’occasion se présente, sans pour autant remettre en cause le code fait des mois/années plus tôt, qui fonctionne sans doute encore bien (si on a cette sagesse) ?

@emmanuelc @notabene

tommi,
@tommi@pan.rent avatar

My (https://tommi.space), even though relatively simple and basic, has a lot of technical debt ( especially), and I am getting crazy cleaning it up…

GustavinoBevilacqua,
@GustavinoBevilacqua@mastodon.cisti.org avatar

@tommi

I got a "SSL_ERROR_PROTOCOL_VERSION_ALERT" (even with lynx).

tommi,
@tommi@pan.rent avatar

@GustavinoBevilacqua Mmmh… to be sure I renewed the Let’s Encrypt certificate, even though everything seemed normal to me. Is it working now?

argyleink,
@argyleink@front-end.social avatar

steal this dialog and popover snippet #CSS

  • transitions
  • entry/exit
  • backdrop included

ready for richer design system integration

try on Codepen
https://codepen.io/argyleink/pen/zYbQBOm

tbroyer,
@tbroyer@piaille.fr avatar

@argyleink Your "IN" and "OUT" comments seem off to me.
IMO the starting-style defines the IN, and the non-starting-style and non-open style (in the first rule, the transitioned properties' values) defines the OUT.
The second rule defines the style of the showing popup/dialog (and their backdrop)

niclake,
@niclake@mastodon.social avatar

@argyleink Love the idea + baseline here; personally, I think 1s is 5x too long, but the look is gorgeous.

OddBird,
@OddBird@front-end.social avatar

Cascading Layouts: A workshop on resilient CSS layouts. https://www.oddbird.net/workshops/cascading-layouts/

Take your sites to the next level with Miriam Suzanne @mia in this 3-session, online workshop on building more resilient and maintainable web layouts using modern .

June 24 - 26 9:00a - 11:30a PT Register Today!

mayank,
@mayank@front-end.social avatar

now has round() and it's a big deal!

unlike say, Sass math.round(), this is much more powerful because it can round across units, and at runtime.

this is super useful when you have something like a percentage value that normally evaluates to a fractional pixel value.

top: 50%; /* computes to 662.27px */  
top: round(50%, 1px); /* computes to 662px */

rounding such values will make them fit better in the pixel grid, avoiding potential blurring issues on some (windows) devices

mayank,
@mayank@front-end.social avatar

here's something CSS also has now: rem()

no, it doesn't convert things to the rem unit. it does something completely unrelated. 😐

https://danielcwilson.com/posts/mathematicss-rem-mod/

jkjustjoshing,
@jkjustjoshing@fosstodon.org avatar

Is there ever a time when this

width: 100%;
max-width: 480px;

behaves differently than this?

width: 480px;
max-width: 100%;

collinsworth,
@collinsworth@hachyderm.io avatar

@jkjustjoshing Not that I'm aware of or can think of. But I prefer the first, because I like to avoid static height/width values wherever possible.

css,
@css@front-end.social avatar

@collinsworth @jkjustjoshing

I would say it depends on the percentage reference. In some cases, we cannot resolve the percentage so the 100% will fall to auto and you can see a different behavior.

Ex: https://codepen.io/t_afif/pen/eYazBrQ/80d9ae23ca3a84872ba15ab53e739fbb

juliemoynat, French
@juliemoynat@eldritch.cafe avatar

Safari, maudit sois-tu ! 😤

#CSS #intégrationWeb

davidbisset,
@davidbisset@phpc.social avatar

Popover element entry and exit animations in a few lines of

https://pawelgrzybek.com/popover-element-entry-and-exit-animations-in-a-few-lines-of-css/

(Technically works in Firefox, but better in Chrome).

via @pawelgrzybek

pawelgrzybek,
@pawelgrzybek@mastodon.social avatar

Could you believe there is no JavaScript involved in this popover enter and exit animations? Just a few lines of CSS!

Thanks @argyleink. I learned all of it from your recent blog post!

https://codepen.io/pawelgrzybek/pen/rNgeQKe

#css

The Popover enter and exit animation with pure CSS. No javascript.

Luke,
@Luke@typo.social avatar

@argyleink @pawelgrzybek

Christopher Lloyd Realization GIF

Luke, (edited )
@Luke@typo.social avatar

@argyleink @pawelgrzybek this gif was meant to show my surprise that it was possible, not a “staring and glaring” cynicism about your response, fyi. Likely the one time in history that gif response was too unclear.

I was reading your site and loved your recent video with Kevin!

mayank,
@mayank@front-end.social avatar

one of my favorite uses of #CSS :has() is to change the grid layout based on what's inside the grid

grid-template-areas: /* simple layout */

&:has(.thing) {  
 grid-template-areas: /* more complex layout */;  
}
mobileatom,
@mobileatom@flipboard.com avatar

We’ve Got Container Queries Now, But Are We Actually Using Them?

https://frontendmasters.com/blog/weve-got-container-queries-now-but-are-we-actually-using-them/?utm_source=flipboard&utm_medium=activitypub

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

toddztoonz,
@toddztoonz@social.lol avatar

If you have an opportunity to attend this study hall hosted by @artlung , do it!

The first session was amazing and super informative. As a result, ended up refactoring and simplifying the chaotic mess that was my stylesheets😊 Was unable to attend the second, unfortunately, but looking forward to the third this Thursday.

https://events.indieweb.org/2024/05/front-end-study-hall-003-CHeoDn1hkrMq

schizanon,
@schizanon@mastodon.social avatar

> The is a game-changer in because it lets you natively position elements relative to other elements, known as anchors. This API simplifies complex requirements for many interface features like menus and submenus, tooltips, selects, labels, cards, settings dialogs, and many more.

https://developer.chrome.com/blog/anchor-positioning-api

pixelambacht,
@pixelambacht@typo.social avatar

I wonder why Google Fonts is not using fetchpriority on their own CSS?

It seems like a performance no-brainer, not doing harm when the browser doesn't support it.

cc @googlefonts

catileptic,
@catileptic@chaos.social avatar

Google announced client-side scanning for Android. I don't think there's any point in calling it otherwise, or discussing the alleged "usefulness" of this technical implementation.

https://techcrunch.com/2024/05/15/googles-call-scanning-ai-could-dial-up-censorship-by-default-privacy-experts-warn/

#CSS #ClientSideScanning

@Mer__edith very aptly reminded, in her reaction, that the AI-powered scanning is proprietary and it's within Google's discretion what type of communication is flagged as problematic. Scams, today. What next? Reproductive rights? Labour organizing?

argyleink,
@argyleink@front-end.social avatar

#CSS env() variables

**iOS: **
env(safe-area-inset-top);
env(safe-area-inset-right);
env(safe-area-inset-bottom);
env(safe-area-inset-left);

**Foldables: **
env(viewport-segment-width);
env(viewport-segment-height);
env(viewport-segment-top);
env(viewport-segment-left);
env(viewport-segment-bottom);
env(viewport-segment-right);

**PWAs: **
env(titlebar-area-x);
env(titlebar-area-y);
env(titlebar-area-width);
env(titlebar-area-height);

scott,
@scott@typetura.social avatar

My “Mapping Typogrpahy” talk from @webdirections is live on @conffab.com !

https://conffab.com/presentation/mapping-typography/?gl=1Eika2mTQXcF

Really thrilled with this talk. I put a lot of myself into it 💜

#css #typogrpahy #webType

css,
@css@front-end.social avatar

I released a new (better) version of CSS Pattern 🥳

👉 https://css-pattern.com 👈

✅ A unique URL per pattern
✅ Controls to adjust the size & colors
✅ Easy navigation between the patterns
✅ Still One-click to get the CSS code

Enjoy more than 140 CSS-only background patterns! 🤩

It took me 4589 years to name all the patterns 😅 but If you find a better (cool) name for a specific pattern let me know 👇

Overview of the new version of css-pattern.com. Showing the home page with different patterns and a few examples where I am adjusting the colors and size.

kizu,
@kizu@front-end.social avatar

New post: “Recent CSS Bookmarks 16”

https://blog.kizu.dev/recent-css-bookmarks-016/

Another big batch of bookmarks: more than a month worth of them.

As usual, with that number of them (32!), I grouped them into eight sections: Colors and Themes, CSS Layouts, Typography, Future CSS, Selectors, Shapes and Effects, Everything Else and My Articles.

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

Soooo... who is attending Day, the Accessibility Club Summit, or both?

Schepp,
@Schepp@mastodon.social avatar

@erikKroes @kizu @utilitybend @5t3ph @nilsbinder Oh yes, indeed, totally forgot about that! 😍

sarajw,
@sarajw@front-end.social avatar

@Schepp @kizu @utilitybend @5t3ph all good! I can't make either anyway as I'll be heading home Saturday morning

hamatti,
@hamatti@mastodon.world avatar

If you're only gonna watch one thing this weekend, watch this amazing talk about the history of styling in the web and the guiding principles of how browsers work with regards to styling by @mia from last week's 11ty conference.

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

#CSS #Eleventy #11ty

a11yclub,
@a11yclub@mastodon.social avatar

Just in: Alongside @karlgroves and @erikKroes, @5t3ph will also be offering a workshop in Amsterdam on 9 June:

Beyond : Requirements for Accessible Components

Participation in half-day workshops costs from € 25, full-day workshops from € 50. Further workshops can be added at any time. Get your tickets: https://ti.to/tollwerk/accessibility-club-summit-2024

More info: https://accessibility.club/event/accessibility-club-summit-2024#schedule-2024-06-09

xeophin,
@xeophin@swiss.social avatar

Don't set fantasy weight values in your @font-face #css definitions. It will fuck up the fallback algorithms should your font lack some symbols.

Written from a company who's definition for the regular weight is set to 100 …

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