bolha.us

1 post1 participant0 posts today

David O'BrienThis is a nice approach to <a href="https://mastodon.scot/tags/responsive" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#responsive</a> <a href="https://mastodon.scot/tags/tables" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#tables</a> in <a href="https://mastodon.scot/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> from the BBC<a href="https://www.bbc.co.uk/sport/football/scottish-championship/table" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://www.bbc.co.uk/sport/football/scottish-championship/table</a>At wider screen sizes, you see the whole thing. Narrower screen sizes have a 'freeze columns' Excel-type effect.I haven't tested it with ATs myself, I assume they have ;)<a href="https://mastodon.scot/tags/A11y" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#A11y</a> <a href="https://mastodon.scot/tags/Accessibility" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Accessibility</a>

Hacker NewsHexagons and Beyond: Flexible, Responsive Grid Patterns, Sans Media Queries (20<a href="https://css-tricks.com/hexagons-and-beyond-flexible-responsive-grid-patterns-sans-media-queries/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://css-tricks.com/hexagons-and-beyond-flexible-responsive-grid-patterns-sans-media-queries/</a><a href="https://mastodon.social/tags/HackerNews" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HackerNews</a> <a href="https://mastodon.social/tags/Hexagons" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Hexagons</a> <a href="https://mastodon.social/tags/Responsive" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Responsive</a> <a href="https://mastodon.social/tags/Design" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Design</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/Grid" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Grid</a> <a href="https://mastodon.social/tags/Patterns" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Patterns</a> <a href="https://mastodon.social/tags/Flexibility" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Flexibility</a> <a href="https://mastodon.social/tags/MediaQueries" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#MediaQueries</a>

pablolarah🟡🟤 Responsive tables by <a href="https://mastodon.social/@cferdinandi" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@cferdinandi</a> One of the long-standing challenges of responsive web design has been how to handle data tables responsively. <a href="https://mastodon.social/tags/Responsive" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Responsive</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/Table" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Table</a> <a href="https://mastodon.social/tags/ResponsiveTable" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ResponsiveTable</a> <a href="https://gomakethings.com/responsive-tables/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://gomakethings.com/responsive-tables/</a>

Ana Tudor 🐯One <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> property I use a lot is `grid-area`.In this basic <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@codepen</a> example, `grid-area` (through its `grid-row` and `grid-column` components) is all that changes value between the narrow and wide screen cases (for the nav items wrapper and for the search wrapper) <a href="https://codepen.io/thebabydino/pen/YzmrXZo" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/YzmrXZo</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/gridLayout" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#gridLayout</a> <a href="https://mastodon.social/tags/responsive" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#responsive</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/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.social/tags/ded" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ded</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/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a>

Matheus FantinelWith the release of Firefox 110, CSS container queries are now supported in all major browsers! I consider it a revolution on responsive web development, especially to people who build UIs in a component-driven way.<a href="https://fantinel.dev/container-queries" target="_blank" rel="nofollow noopener noreferrer" translate="no">https://fantinel.dev/container-queries</a><a href="https://bolha.us/tags/css" class="mention hashtag" rel="tag">#css</a> <a href="https://bolha.us/tags/webdev" class="mention hashtag" rel="tag">#webdev</a> <a href="https://bolha.us/tags/responsive" class="mention hashtag" rel="tag">#responsive</a>

Alexis Degryse<a href="https://h4.io/tags/introduction" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#introduction</a> Je m’appelle Alexis, j’ai la chance d’exercer le métier d’intégrateur web depuis 14 ans. Je suis féru de <a href="https://h4.io/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> et <a href="https://h4.io/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> depuis toujours. J’adore discuter de <a href="https://h4.io/tags/s%C3%A9mantique" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#sémantique</a>, d’<a href="https://h4.io/tags/accessibilit%C3%A9" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#accessibilité</a>, de <a href="https://h4.io/tags/responsive" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#responsive</a>, d’<a href="https://h4.io/tags/ergonomie" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ergonomie</a>, de <a href="https://h4.io/tags/SEO" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SEO</a>, d’<a href="https://h4.io/tags/animations" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#animations</a>. Si mon profil vous intéresse : <a href="https://alexis-degryse.com" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://alexis-degryse.com</a> (prestations, projets, formations, certifs - coucou <a href="https://mastodon.cloud/@Opquast" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@Opquast</a> et <a href="https://social.a11y.fr/@access42" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@access42</a> ❤️).Côté perso, j'ai 35 ans, marié, papa, joueur 🎮, baigné dans la culture populaire japonaise des années 90.

Recent searches

Search options

Administered by:

Server stats:

#responsive