Grilled Cheese

ExploreLog inSign up
Terms of UsePrivacy PolicyCommunity StandardsHelpGet the app

Grilled Cheese is a product of Village Compute

Version devBuilt at: 2026-10-13 09:58:44 EDT

Explore

PostsPeople
LatestRanked
Load more
@css-questions.bsky.socialSep 22, 2026, 11:35 PM

🏆 September 22nd CSS-Dodos Top 2

1 henrik_elias - 2/6, clean
2 cheddy - 3/6, clean

css-questions.com/css-dodos

#css #cssdodos #cssquestions

@lloveras.infoSep 22, 2026, 10:07 PM

#css #html

codepen.io/editor/Sensi...

@baumannzone.devSep 22, 2026, 8:19 PM

Solo #CSS muchachos, nada de #JavaScript ni de cosas inútiles como Java.

blog.master.dev/expanding-cs...

@lionel-peramo.comSep 22, 2026, 8:01 PM

You probably built your checkout button with AJAX.

Have you tested what happens when JavaScript fails?

Network drops or extensions can block your scripts.

When that happens, users click and nothing works.

#CSS #WebDev #WebPerformance

1/3

Code example showing CSS media query scripting none. The style hides an AJAX checkout button and reveals a native HTML form when JavaScript is disabled.
@lyteforce.caSep 22, 2026, 6:23 PM

New on Lyteforce Writes ✍️
= HTML for People and I think I'm People =

Spent some time learning #HTML & #CSS in the '90s with my GeoCities website. Figure it was time to give it another try here in the '20s courtesy of Blake Watson's ebook.

lyteforcewrites.fyi/html-for-peo...

#LyteforceWrites

@brennan.social.lol.ap.brid.gySep 22, 2026, 6:18 PM

Static Site Generators for Beginners

https://brennan.day/static-site-generators-for-beginners/

#blogging #jekyll #hugo #11ty #webdev #webdevelopment #javascript #css #html

@s0-and-s0.bsky.socialSep 22, 2026, 5:08 PM

Been doing stuff with frontend things, and figured a few others might find this pattern useful

#css #frontend #ui #ux #webdev

```css /** * Example of first/last-of-type and nth-child usage for fun and debugging. * * @author S0AndS0.eth * @license This is your problem now ;-) * * ```html * <div> * <div class="target"> * <span>Primary one</span> * <span>Hidden first</span> * <span>Hidden second</span> * </div> * </div> * * <div> * <div class="target"> * <span>Primary two</span> * </div> * </div> * ``` * * Expected result in browser * * ```text * Primary one (Hidden first, Hidden second) * Primary two * ``` * * Expected result when printed/saved as PDF * * ```text * Primary one * Primary two * ``` */ .target > *:not(:first-of-type) { @media print { display: none; } color: pink; font-size: 75%; &:nth-child(2)::before { content: ' ('; } &:nth-child(n+2):not(:last-of-type)::after { content: ', '; } &:last-of-type::after { content: ')'; } } ```
@web-standards.devSep 22, 2026, 5:04 PM

Responsive iframes in Chrome 154. Sebastian Benz and Bramus introduce frame-sizing, a CSS property that sizes an <iframe> to its content, with a <meta> element opt-in and window.requestResize() for later updates. #html #css

developer.chrome.com...

Chrome logo, an illustration of a scrollable embedded page, an HTML snippet with a responsive-embedded-sizing <meta> element, a frame-sizing CSS snippet, and title “Responsive iframes in Chrome 154”.
3
@web-standards.ruSep 22, 2026, 4:58 PM

Адаптивные iframe в Chrome 154. Себастьян Бенц и Брамус Ван Дамм рассказывают о свойстве frame-sizing, которое подгоняет <iframe> под его контент. Встроенный документ разрешает это элементом <meta>. Пока за флагами в Chrome и Edge. #html #css

developer.chrome.com...

Логотип Chrome, прокручиваемая встроенная страница, фрагмент HTML с элементом meta responsive-embedded-sizing, фрагмент CSS с frame-sizing и заголовок «Responsive iframes in Chrome 154».
@oliviermaghe.bsky.socialSep 22, 2026, 2:17 PM

🎯 CSS Battle Mardi, 22 Septembre 2026

Pour reproduire le symbole du dollar aujourd'hui, j'ai misé sur l'astuce imparable du scale: -1 !

#css #CSSBattleChallenge #cssbattle #dailychallenge #cssinfrench #CSSBattleSolution

youtu.be/i0uatWO6_oM

@stylelib.orgSep 22, 2026, 1:15 PM

Smart Timer And Counter – jQuery Mega Countdown Plugin

https://code.stylelib.org/?p=11600

#codecanyon #css #javascript #jquery #responsive

Smart Timer And Counter – jQuery Mega Countdown Plugin
@dusoft.fosstodon.org.ap.brid.gySep 22, 2026, 12:33 PM

#mastodon v4.7.2 broke the responsive web UI
(advance interface, 5 columns, it doesn't fit, but some content is out of viewport)

#mastoadmin #css #html #ui #ux #masto

@yrashka.bsky.socialSep 22, 2026, 9:08 AM

Update for github.com/Yrashka200/y...

Changes: github.com/Yrashka200/y...

#html #css #js

Photo, no description
@yellowduck.beSep 22, 2026, 8:05 AM

Why settle for a binary dark mode toggle? Discover why a tri-state option could enhance clarity and user experience.

#best-practice #css #frontend #reading-list

@maikelkrause.bsky.socialSep 22, 2026, 7:40 AM

No more hacky workarounds for #CSS unit division 🥳

@cartoonjournaal.bsky.socialSep 22, 2026, 5:40 AM

Cartoonjournaal 22 september 2026:

"Investeren in ondergrondse opslag van CO2 is pure struisvogelpolitiek..."

#klimaatbeleid #CO2 #fossiel #verduuzaming #CarbonCaptureAndStorage #CSS #broeikasgas #klimaatverandering #greenwashing #FossilFuel #carbondioxide #climatechange #Shell #BP #TotalEnergies

De cartoon toont vier mensen die hun kop in het zand steken. Bovenaan staat: ‘Investeren in ondergrondse opslag van CO₂ is pure struisvogelpolitiek…’. In de tekstballonnen wordt eerst gevraagd of er een klimaatprobleem is. Het antwoord luidt ironisch: ‘U hebt gelijk. Wij zitten al jaren fout!’ Daarna wordt gewezen op de grote lege ruimte onder de grond en zegt een ander personage dat hij miljarden euro’s wil geven om er CO₂ in op te slaan. Twee struisvogel bekijken het tafereel van een afstand en één struisvogel zegt: "Mensen noemen dit struisvogelgedrag maar als je het mij vraagt is het pure zelfprojectie." De cartoon bekritiseert daarmee de politiek rond CO₂-opslag (CCS). De struisvogels symboliseren volgens de cartoon het wegkijken van het klimaatprobleem. De personen die over elkaar heen liggen, zijn gelabeld met ‘olie- en gasbedrijven’, ‘ISCC’, ‘fossiele industrie’ en ‘kabinet Jetten’. Hiermee suggereert de cartoon dat de fossiele industrie en de overheid nauw met elkaar verbonden zijn en dat CO₂-opslag vooral hun belangen zou dienen. De humor ontstaat door de tegenstelling tussen de serieuze klimaatproblematiek en het absurde beeld van politici en bedrijven die letterlijk hun kop in het zand steken.Photo, no descriptionPhoto, no description
@stylelib.orgSep 22, 2026, 3:15 AM

Animated CSS3 Tabs

https://code.stylelib.org/?p=19802

#codecanyon #css #css3

Animated CSS3 Tabs
@codegrid.netSep 22, 2026, 3:00 AM

【Tips】
CSSの:has()を使うと、サブメニューをもつ項目にだけ、HTMLを変えずにアイコンを付けられます💫

nav li:has(> ul) > a::after {
content: ' ▼';
font-size: 0.75em;
}

「直接の子としてulをもつli」を:has()で選択し、そのリンクに::afterでアイコンを追加する書き方です✏️

#codegrid #css

ダークテーマのナビゲーション例で、サブメニューを持つ項目（製品、サポート）に下向き三角▼が表示され、ノートPC・デスクトップ・よくある質問・お問い合わせなどの子項目を含むメニュー構成を示している。
@css-questions.bsky.socialSep 21, 2026, 11:35 PM

🏆 September 21st CSS-Dodos Top 3

1 henrik_elias - 2/6, clean
2 cheddy - 2/6, clean
3 Flex Shuffler 589 - X/6

css-questions.com/css-dodos

#css #cssdodos #cssquestions

@web-standards.devSep 21, 2026, 7:47 PM

Better icon and label alignment. Ahmad Shadeed lines an icon up with the first line of a wrapping label using the lh unit: half the difference between the line box and the icon size, applied as a translateY offset. #css #layout

ishadeed.com/article...

Title “Better Icon and Label Alignment”, author’s photo, a demo with “Icon” and “Font size” sliders, two list items reading “How to align an icon to a label.”, and a CSS code block.