Okla.Social

14 posts13 participants2 posts today

David Chisnall (*Now with 50% more sarcasm!*)Does anyone know how (in <a href="https://infosec.exchange/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a>) to tell Apple’s Books app not to break pages in the middle of a specific element (with <a href="https://infosec.exchange/tags/ePub" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ePub</a> books)? I’ve tried <code>page-break-inside: avoid;</code> and <code>break-inside: avoid;</code> but neither work. The most egregious is that it page breaks in the middle of an SVG figure, with half on one page and half on the next.

Ana Tudor 🐯Ever wanted to get the number of auto-fit columns in CSS?``` --u: 5em; grid-template-columns: repeat(auto-fit, minmax(var(--u), 1fr)) ```It's now possible! Using registered <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> vars, the tan division hack and container query units! Here's a little test on <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@codepen</a>: <a href="https://codepen.io/thebabydino/pen/JojpBJr" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/JojpBJr</a><a href="https://mastodon.social/tags/cssGrid" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssGrid</a> <a href="https://mastodon.social/tags/cssLayout" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssLayout</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a> <a href="https://mastodon.social/tags/layout" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#layout</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a>

Daniel Fisher(lennybacon)TIL: <a href="https://infosec.exchange/tags/Tailwind" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Tailwind</a> <a href="https://infosec.exchange/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> ist … äh… speziell

Stephanie M<a href="https://front-end.social/@jensimmons" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@jensimmons</a> That is great news! Anchor Positioning is going to be a huge win for <a href="https://mstdn.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a>

securityaffairsAttackers use <a href="https://infosec.exchange/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> to create evasive <a href="https://infosec.exchange/tags/phishing" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#phishing</a> messages <a href="https://securityaffairs.com/175512/security/attackers-use-css-to-create-evasive-phishing-messages.html" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://securityaffairs.com/175512/security/attackers-use-css-to-create-evasive-phishing-messages.html</a> <a href="https://infosec.exchange/tags/securityaffairs" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#securityaffairs</a> <a href="https://infosec.exchange/tags/hacking" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#hacking</a>

Peter MüllerWow. Diese Leser-Mail made my day:»... ich habe mir vor 3 Wochen ihr Buch "Einstieg in HTML und CSS" gekauft und bin fleißig am lernen ... Sie erklären fantastisch und das mit einem Humor, der genau meinen trifft. Ich wollte einfach kurz Danke sagen!… und nun bin ich so aufgeregt und voller Freude beim Lernen, dass ich ständig die Zeit vergesse und es kaum erwarten kann wieder aufzuwachen um weiterzumachen. Was haben Sie denn da angerichtet? :-D«<a href="https://mastodon.social/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/lernen" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#lernen</a><a href="https://html-und-css.de/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://html-und-css.de/</a>

Ana Tudor 🐯A super simple little <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/subgrid" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#subgrid</a> example on <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@codepen</a>: <a href="https://codepen.io/thebabydino/pen/QwWNwOz" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/QwWNwOz</a><a href="https://mastodon.social/tags/cssLayout" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssLayout</a> <a href="https://mastodon.social/tags/cssGrid" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssGrid</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</a>

David Bisset.van { .van { .car { color: blue; } } }<a href="https://phpc.social/tags/meme" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#meme</a> <a href="https://phpc.social/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdev</a> <a href="https://phpc.social/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a>

Richie Khoo<a href="https://hachyderm.io/tags/Coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Coding</a> Q: Anyone implemented a nice three-state dark mode toggle?Love to hear your tips, ideas and even links to examples/code are welcome.This feature is more involved that first look as this HN post unpacks.. <a href="https://news.ycombinator.com/item?id=23197966" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://news.ycombinator.com/item?id=23197966</a>My current wishlist:- Three states (system/light/dark) - Preference stored for next time - Two icons light/darl (click selected icon a second time to 'turn it off' and return to system) - vanilla js - leans into cssThis implementation comes pretty close. <a href="https://www.bram.us/2020/04/26/the-quest-for-the-perfect-dark-mode-using-vanilla-javascript/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://www.bram.us/2020/04/26/the-quest-for-the-perfect-dark-mode-using-vanilla-javascript/</a>This post points to a bunch of great three-state dark mode articles in its references. <a href="https://www.brycewray.com/posts/2024/01/its-tri-state-switch-time" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://www.brycewray.com/posts/2024/01/its-tri-state-switch-time</a><a href="https://hachyderm.io/tags/WebDesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDesign</a> <a href="https://hachyderm.io/tags/Programming" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Programming</a> <a href="https://hachyderm.io/tags/Ruby" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Ruby</a> <a href="https://hachyderm.io/tags/WebDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDevelopment</a> <a href="https://hachyderm.io/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://hachyderm.io/tags/FrontEnd" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#FrontEnd</a> <a href="https://hachyderm.io/tags/DarkMode" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#DarkMode</a> <a href="https://hachyderm.io/tags/Coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Coding</a>

CSS by T. Afif :verified:💡 CSS Tip!A simple CSS code to smoothly stop the rotation of your element on hover. The rotation will resume smoothly on mouse-out as well.<a href="https://css-tip.com/stop-rotation/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://css-tip.com/stop-rotation/</a><a href="https://front-end.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://front-end.social/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a>

Amber WeinbergI scream with the rage of a thousand suns.<a href="https://front-end.social/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> <a href="https://front-end.social/tags/html" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#html</a> <a href="https://front-end.social/tags/webdevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdevelopment</a> <a href="https://front-end.social/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdev</a>

st1nger :unverified: 🏴‍☠️ :linux: :freebsd:<a href="https://infosec.exchange/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> Relative Colors <a href="https://ishadeed.com/article/css-relative-colors/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://ishadeed.com/article/css-relative-colors/</a>

sb arms & legsMy thinking behind <a href="https://metroholografix.ca/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> is to try to be close to classless as possible - meaning all styling is applied to root elements. Semantics then dictate layout.Classes are then used very sparingly for specific cases, like indicating the currently displayed page on the main menu. I started writing <a href="https://metroholografix.ca/tags/html" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#html</a> in 1996 - it has come a long way, and it is pretty awesome.

Joe CrawfordWould a Zoom call where you join a handful of folks to solve <a href="https://xoxo.zone/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> and <a href="https://xoxo.zone/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> conundrums interest you? I learn something new <a href="https://xoxo.zone/tags/FrontEnd" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#FrontEnd</a> every time. Front End Study Hall on the <a href="https://xoxo.zone/tags/IndieWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#IndieWeb</a> -- See you tomorrow! <a href="https://events.indieweb.org/2025/03/front-end-study-hall-023-WmHNZ7nKEp1Z" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://events.indieweb.org/2025/03/front-end-study-hall-023-WmHNZ7nKEp1Z</a>

alexandrathis is it, folks! we are in the final week before submissions are due for GOOD INTERNET, a new print periodical magazine about all the things that make the <a href="https://tilde.zone/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> fun: things like the <a href="https://tilde.zone/tags/smallweb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#smallweb</a>, the fediverse, the <a href="https://tilde.zone/tags/indieweb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#indieweb</a>, and efforts to actively fight <a href="https://tilde.zone/tags/enshittification" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#enshittification</a>. submissions are open until MARCH 15.check the submission guidelines or sign up for email alerts to be notified when we publish in may!<a href="https://goodinternetmagazine.com" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://goodinternetmagazine.com</a>if this is your first time hearing about this, you still have enough time to come up with and write an article or complete a digital <a href="https://tilde.zone/tags/art" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#art</a> piece, if you're passionate about the <a href="https://tilde.zone/tags/internet" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#internet</a> and want to write about it! :) bloggers, it's your time to shine!~ i can't wait to show y'all the incredible stories that have been submitted from all over the 'net, and some of the coolest art i've seen about the web!thank you to everyone who's been so supportive of this project already. this is why this side of the internet is amazing. ❤️ please boost, if you can; i want to make sure i did everything i could to include as many diverse voices as i can.thank you! 🤟 original post: <a href="https://tilde.zone/@xandra/113913277766098384" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://tilde.zone/@xandra/113913277766098384</a><a href="https://tilde.zone/tags/writing" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#writing</a> <a href="https://tilde.zone/tags/blogging" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#blogging</a> <a href="https://tilde.zone/tags/personalweb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#personalweb</a> <a href="https://tilde.zone/tags/personalwebsites" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#personalwebsites</a> <a href="https://tilde.zone/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdev</a> <a href="https://tilde.zone/tags/html" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#html</a> <a href="https://tilde.zone/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> <a href="https://tilde.zone/tags/js" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#js</a> <a href="https://tilde.zone/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://tilde.zone/tags/magazine" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#magazine</a> <a href="https://tilde.zone/tags/publishing" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#publishing</a> <a href="https://tilde.zone/tags/codingisart" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#codingisart</a> <a href="https://tilde.zone/tags/indie" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#indie</a> <a href="https://tilde.zone/tags/writers" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#writers</a> <a href="https://tilde.zone/tags/fediverse" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#fediverse</a> <a href="https://tilde.zone/tags/webdesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdesign</a> <a href="https://tilde.zone/tags/digitalart" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#digitalart</a> <a href="https://tilde.zone/tags/artist" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#artist</a>

Christian AlderTIL about CSS image-rendering: pixelated;Allowing pixel art to scale up to any size and not look bad.On / Off comparison for increasing scale 32px, 64px, 128px, and 256px.<a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a>

Marius GundersenI played around with <a href="https://mastodon.social/tags/viewtransitions" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#viewtransitions</a> and <a href="https://mastodon.social/tags/mathml" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#mathml</a> yesterday, and made this example of how to animate solving an equation. It was pretty straight forward to get to work, but I wish I had some control over the transitions. Now the elements move in a straight line, it would be cool of i could make them follow an arc. <a href="https://codepen.io/mariusgundersen/pen/EaxvjmQ" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/mariusgundersen/pen/EaxvjmQ</a><a href="https://mastodon.social/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdev</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/js" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#js</a> <a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a>

AliveDevilTIL: There is <a href="https://tauri.earth/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> Margin Collapse. And I'm not sure I like it.

Droppie [infosec] 🐨:archlinux: :kde: :firefox_nightly: :thunderbird: :vegan:<a href="https://mastodon.online/@eknobl" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@eknobl</a> Also, the native <a href="https://infosec.space/tags/TabGroups" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#TabGroups</a> have been working well for several weeks in :firefox_nightly:, & in my recent testing they also now seem to have become reliable in :firefox: . The whole native <a href="https://infosec.space/tags/VerticalTabs" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#VerticalTabs</a> UI ootb has ridiculous amounts of padding per tab, such that a stupidly small number of tabs can be open before invoking the scrollbar... i fixed this via some <a href="https://infosec.space/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a>. The one remaining major design paradigm i dislike is that the tab groups are primitive like in Vivaldi & Chromium, ie, only single-level; no hierarchical trees are possible. Hence, even though the new VTs & TGs are aesthetically pleasing & quite usable, i still keep returning to Sidebery. :firefox_nightly: <a href="https://infosec.space/tags/FirefoxNightly" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#FirefoxNightly</a> + <a href="https://infosec.space/tags/Mv2" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Mv2</a> <a href="https://infosec.space/tags/uBO" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#uBO</a> + <a href="https://infosec.space/tags/Sidebery" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Sidebery</a> + <a href="https://infosec.space/tags/FirefoxSecondSidebar" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#FirefoxSecondSidebar</a> = THE best browsing & sophisticated tab management UX i've ever had, easily eclipsing Vivaldi, :floorp: <a href="https://infosec.space/tags/Floorp" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Floorp</a>, :zenbrowser: <a href="https://infosec.space/tags/ZenBrowser" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ZenBrowser</a>, Waterfox, LibreWolf... ergo = 💜🥳🎉👯‍♀️:firefox_nightly: <a href="https://infosec.space/tags/FirefoxNightly" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#FirefoxNightly</a> + <a href="https://infosec.space/tags/NativeVerticalTabs" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#NativeVerticalTabs</a> + <a href="https://infosec.space/tags/uBlockOrigin" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#uBlockOrigin</a> + <a href="https://infosec.space/tags/FirefoxSecondSidebar" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#FirefoxSecondSidebar</a> = Very usable already as of Feb 2025, albeit less powerful than Sidebery, ergo = 💜 🎉

Recent searches

Search options

Administered by:

Server stats:

#CSS