johnnydecimal, 1 day ago to CSS

Any #CSS 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!

SenseException, 1 day ago to CSS German

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

helma, 2 days ago to security

"Going Dark: The war on encryption is on the rise. Through a shady collaboration between the US and the EU."

#Security #Privacy #CSAM #CSS

https://mullvad.net/en/why-privacy-matters/going-dark

OddBird, 2 days ago to CSS

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.

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

davidbisset, 2 days ago to CSS

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

https://matcha.mizu.sh/

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

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

davidbisset, 2 days ago to CSS

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

#CSS #memes

aral, 3 days ago to SmallWeb

So! Many! Kittens!

(Going to record a demo of the new interactive shell – REPL to some – and multi-page Settings this afternoon, just planning it out now.)

Oh and is that me creating and calling web routes interactively in the REPL on a live server? Why yes, yes it is.

:kitten:💕

#Kitten #SmallWeb #web #dev #HTML #CSS #JavaScript #NodeJS

css, 3 days ago to CSS

💡 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

#CSS #HTML

XavCC, 2 days ago to CSS French

Question #CSS

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, 3 days ago to CSS French

Dites, développeuses z'et développeurs, régulièrement, dans mon cercle professionnel direct, j'entends dire que vous n'aimez pas #CSS (voire #HTML).
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.

#dev #webdev #webdesign

boolat, 3 days ago to webdev

Once I thought, what if there was a CSS file that makes the document look like it is a command line interface... So I made one, but I really don't know what it could be used for :) #webdev #css

video/mp4

tommi, 3 days ago to CSS

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

OddBird, 3 days ago to CSS

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 #css.

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

argyleink, 3 days ago to CSS

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

mayank, 3 days ago to CSS

#CSS 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

jkjustjoshing, 3 days ago to CSS

Is there ever a time when this

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

behaves differently than this?

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

#css #html #WebDesign #webdev

westbrook, 3 days ago to webdev

h* elements have margin by default!? Who knew.

#maintainerLive #html #css

juliemoynat, 3 days ago to CSS French

Safari, maudit sois-tu ! 😤

#CSS #intégrationWeb

davidbisset, 3 days ago to CSS

Popover element entry and exit animations in a few lines of #CSS

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

symfonystation, 3 days ago to Symfony

Explore the May 19, 2023 @symfonystation Communiqué of Symfony, Drupal, PHP, Fediverse, and Cybersecurity news.

https://symfonystation.mobileatom.net/Symfony-Station-Communique-19-May-2023

#Symfony #SymfonyCasts #PHP #Drupal #Cybersecurity #Fediverse #CSS 🇺🇦 #WayBackWednesday

https://newsletter.mobileatom.net/may-19-2023-symfony-station-communique-2/

#CSS #Cybersecurity #Drupal #fediverse #PHP #symfony #SymfonyCasts #WayBackWednesday

danrot, 4 days ago to webdev

I am sincerely wondering how hard it is to style a #HTML checkbox using #CSS. I'd be happy with just aligning them with a label, but this already seems to be asking for a lot. And most answers I find online are already outdated...

But hey, if you know more than I do let me know 🙂

pawelgrzybek, 4 days ago to CSS

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.

mayank, 4 days ago to CSS

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, 4 days ago to CSS

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

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, 4 days ago to CSS

If you have an opportunity to attend this #FrontEnd 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

#IndieWeb #CSS #HTML