mobileatom, 4 days ago to CSS

Modern CSS Layouts: You Might Not Need A Framework For That. #CSS

https://www.smashingmagazine.com/2024/05/modern-css-layouts-no-framework-needed/?utm_source=flipboard&utm_medium=activitypub

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

iamdtms, 4 days ago to CSS

• <select> + <hr> is clever
• popover is handy
• light-dark() rewamp is not a big step (app feature still)
• :has is fantastic already
• container queries also

The latest in Web UI (Google I/O ‘24)
#css much, #etc:
https://www.youtube.com/watch?v=_-6LgEjEyzE

argyleink, 4 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

juliemoynat, 4 days ago to CSS French

Safari, maudit sois-tu ! 😤

#CSS #intégrationWeb

emmanuelc, 4 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

davidbisset, 4 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, 4 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

mobileatom, 5 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

danrot, 5 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, 5 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, 5 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 */;  
}  

baldur, 5 days ago to random

We really don’t make enough of the fact that you don’t need JS to make a nice website. Just HTML and CSS

And, whatever most programmers say about them, HTML and CSS are absolutely much more accessible to learn than JS ever has been or will be

toddztoonz, 5 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

schizanon, 5 days ago to CSS

> The #CSS #AnchorPositioning #API is a game-changer in #web #development because it lets you natively position elements relative to other elements, known as anchors. This API simplifies complex #layout 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

#webDev #cssAnchorPositioning

Edent, 5 days ago to Cybersecurity

Here's a fun little security bug caused by... DARK MODE!

When you try to verify your identity on @element it asks you whether the image you see on the web is the same as the image you see on the app.

But if you have dark mode enabled on the web, they look different.

Report:
https://github.com/element-hq/element-web/issues/27492

#CyberSecurity #DarkMode #CSS

pixelambacht, 5 days ago to CSS

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

#css #frontend #typography

aral, 6 days ago to SmallWeb

:kitten: 🎉

Kitten now has a lovely new multi-page Settings screen and… drumroll… a new 🐢 interactive shell (REPL) for you to play with the running state of your Small Web site/app/place and debug your app, inspect/manipulate its database, etc.

I plan on recording demos of each of them tomorrow but you can play with them now.

And here’s a little tutorial to get you started with the shell:

https://codeberg.org/kitten/app#kitten-s-interactive-shell

💕

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

Screenshot of Kitten running in terminal: 🌍 Domain https://localhost 📂 Source /var/home/aral/Projects/kitten/app/examples/file-uploads 💾 Databases /var/home/aral/.local/share/small-tech.org/kitten/databases 🐢 To launch an interactive shell, press the [s] key. Server is running and listening for connections… s 🐢 Launching interactive shell ctrl-d to exit; .help for assistance A good place to start is to run the .ls command to see the keys of the global kitten object: » 💡.ls is an alias for Object.keys(kitten) [ 'version', 'domain', 'port', 'app', 'databaseDirectory', 'projectIdentifier', 'deploy', 'WebSocket', 'html', 'libraries', 'page', 'events', 'css', 'js', 'markdown', 'md', 'safelyAddHtml', 'sanitise', 'uploadsDirectory', '_db', 'uploads', 'package', 'db' ] 🐱 💬 kitten.db.images[0] Proxy [ { path: '/uploads/1a6c2612-057d-435b-83c7-7157b4add982/', altText: 'Screenshot of Draw Together sketch that reads Free Gaza!' }, { get: [Function: bound getHandler], set: [Function: bound setHandler], defineProperty: [Function: bound definePropertyHandler], deleteProperty: [Function: bound deletePropertyHandler] } ] 🐱 💬

JanMiksovsky, 6 days ago to webdev

The fixation at #GoogleIO last week on AI buried the much more interesting talk by @Una on The Latest in Web UI, which highlighted the ton of interesting features arriving in #HTML and #CSS. https://www.youtube.com/watch?v=_-6LgEjEyzE

I wish the other browser vendors didn't rely so heavily on Google to get the word out. They all do so much work to make these features possible, as do the standards committees, the #OpenUI group, and @igalia, and they all deserve to get more credit.

argyleink, 6 days ago to CSS

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

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

catileptic, 6 days ago to CSS

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?

css, 6 days ago to CSS

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 👇

#CSS #HTML #design

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.

SteveFaulkner, 7 days ago to webdev

👉🏼 A SIMPLE CUSTOM
Had reason to re-read this recently.

“For whatever reason some people don’t like the standard HTML checkbox and radio button, they seek to jazz ’em up and in the process the often jizz up the usability/accessibility of these controls.”

#HTML #ARIA #CSS #accessibility

https://html5accessibility.com/stuff/2021/01/24/a-simple-custom/

noellemitchell, 7 days ago to webdev

I really should be learning CSS faster 😅 :blobcatfearful:

My Neocities blog looks really plain at the moment. :blobcatamused:

#WebDev #coding #CSS

davidbisset, 7 days ago to CSS

“Why don’t we talk about minifying #css anymore?” #webdev https://blog.sentry.io/why-dont-we-talk-about-minifying-css/