Cascading Style Sheets

johnnydecimal,
@johnnydecimal@hachyderm.io avatar

Any gurus want to help me solve a puzzle? Maybe @robb? Honestly I don't know where to start.

The 'Location' box at the top of my page works great. Except on landscape mobile, where the corners are all janky as the lines don't line up: see screenshot.

But if I take my desktop browser, pop it in responsive mode, and shrink the window: it's A-OK!

WTF?

A screenshot of Safari in responsive mode. The window is 591px wide and the lines look great!

johnnydecimal,
@johnnydecimal@hachyderm.io avatar

@Two9A @robb Interesting! Safari iOS bug perhaps. I'd feel better about that.

robb,
@robb@social.lol avatar

@johnnydecimal I’ve sent you a solution on discord sir 🫡

SenseException, German
@SenseException@phpc.social avatar

communication tipp: It's important to know why !important was important

afilina,
@afilina@phpc.social avatar

@SenseException Usually because css got unnecessarily complicated and reusable.

SenseException,
@SenseException@phpc.social avatar

@afilina Especially on third party inline styles.

OddBird,
@OddBird@front-end.social avatar

Thanks to everyone who joined us for our first ever Winging It Live stream last week! We had so much fun with you all that we're planning another one on May 30 @ 1pm ET / 11am MT.

Miriam (@mia) and James (@Jamessw) are going to discuss Anchor Positioning. Leave your questions in the comments. We'll post the link to the live stream here next week. Or you can subscribe to get updates.

https://www.youtube.com/@wingingitoddbird

davidbisset,
@davidbisset@phpc.social avatar

matcha.css is a "drop-in semantic styling library in pure ".

https://matcha.mizu.sh/

Designed to style elements similarly to a default browser stylesheet, eliminating the need for users to manually patch their documents.

Ideal for fast prototyping, static HTML pages, generated documents, etc.

davidbisset,
@davidbisset@phpc.social avatar

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

css,
@css@front-end.social avatar

💡 CSS Tip!

One line of code that looks strange and confusing. You may think it's not even CSS but it will save you many times in the future!

It will make sure the width of your element is always an integer! No more decimal and rounding issues!

"width: auto" with an upgrade 😎

No browser support yet but you can test it on the latest Chrome with the experimental flag enabled: https://codepen.io/t_afif/pen/rNgLyJz

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 Sto riscrivendo tutto il mio sito usando CSS Grid. Speriamo sia meglio…

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!

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.

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 ! 😤

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

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