SVG & media queries - JakeArchibald.com
One of the great things about SVG is you can use media queries to add responsiveness to images: <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"> <style> circle { fill: green; } @media (min-width: 100px) { circle { fill: blue; } } </style> <circle cx="50" cy="50" r="50"/> </svg> <img src="circle.svg" width="50" height="50" /> <img src="circle.svg" width="100" height="100" /> <ifram
Accessible SVGs in High Contrast Mode | CSS-Tricks
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. Making your SVG accessible includes adding extra steps to your workflow, but is well-worth it. By embracing clean, semantic markup and taking advantage of some of the less well-known features of CSS, you can create easily maintainable solutions that include considerations fo
SVG has more potential · MadebyMike
A bunch of interesting techniques for using SVG to make unique responsive components. Posted by Mike on 19th September 2016 (about a 10 minute read). I think many of us are not using SVG to its full potential. I often see SVG used as an alternative image format or as a simple solution for icons, and whilst it's great for these things, it's also a lot more than that. SVG can solve problems that HTM
Practical SVG
A note from the editors: We’re pleased to share an excerpt from Chapter 6 of Chris Coyiers’s new book, Practical SVG, available now from A Book Apart. You’ll probably want to exert some sizing control over any graphic you put on a website. Hey! You! Logo! You should be this size: <img src="logo.png" class="logo" /> .logo { width: 220px; height: 80px; } And so shall it be. But if the element you ar
Responsive Logo Composition With SVG
You appear to be offline, some content may be unavailable. Logos are an ideal use-case for SVG. Because they’re typically designed for reproduction and versatility, they’re almost always vector to begin with. SVG’s support of CSS and media queries means we can adapt brand imagery depending on the display size, a technique artfully documented by the likes of Andreas Bovens, Ilya Pukhalski, Sara Sou
PX, EM or REM Media Queries? | Zell Liew
Have you wondered if you should use px, em or rem for media queries? I had the same question too, and I never figured it out, not till now. When I first created the mappy-breakpoint library, I used rem units. Then after a conversation with Sam Richard, I quickly switched to em instead because I found out there isn’t a difference between the two. In addition to em and rem, a popular unit of choice
[CSS]Media Queriesã§ä½¿ã†å˜ä½ã¯px, em, remã®ã©ã‚ŒãŒé©ã—ã¦ã„ã‚‹ã‹æ¤œè¨¼ -px指定ã¯æ³¨æ„ãŒå¿…è¦
レスãƒãƒ³ã‚·ãƒ–用ã®Media Queriesを使ã†æ™‚ã«ã€Œ@media (min-width: 400px) {}ã€ã®ã‚ˆã†ã«ã€Œpxã€ã‚’å˜ä½ã«ä½¿ç”¨ã—ã¦ã„る人も多ã„ã¨æ€ã„ã¾ã™ã€‚ã—ã‹ã—ã€px指定ã«ã¯æ³¨æ„ãŒå¿…è¦ã§ã™ã€‚ Webページã§ã‚ˆã使用ã•ã‚Œã‚‹æ¡ä»¶ã§æ¤œè¨¼ã‚’è¡Œã„ã€Media Queriesã§ãªãœpxを使ã£ã¦ã¯ã„ã‘ãªã„ã®ã‹ã€ãã—ã¦ä½•ãŒé©ã—ã¦ã„ã‚‹ã®ã‹ãŒåˆ†ã‹ã‚‹æ¤œè¨¼è¨˜äº‹ã‚’紹介ã—ã¾ã™ã€‚ PX, EM or REM Media Queries? 以下ã€å„ãƒã‚¤ãƒ³ãƒˆã‚’æ„訳ã—ãŸã‚‚ã®ã§ã™ã€‚ ※当ブãƒã‚°ã§ã®ç¿»è¨³è¨˜äº‹ã¯ã€å…ƒã‚µã‚¤ãƒˆæ§˜ã«è¨±å¯ã‚’å¾—ã¦ç¿»è¨³ã—ã¦ã„ã¾ã™ã€‚ ã¯ã˜ã‚ã« pxã¨emã¨remã®æ¤œè¨¼æ–¹æ³• 検証1. htmlè¦ç´ ã§font-sizeを指定 検証2. ブラウザã§ã‚ºãƒ¼ãƒ ãŒå¯èƒ½ 検証3. ブラウザã§ãƒ•ã‚©ãƒ³ãƒˆè¨å®šãŒå¤‰æ›´å¯èƒ½ 検証ã®çµæžœ ã¯ã˜ã‚ã« ã‚ãªãŸã¯Media Queriesã§ä½¿ã†å˜ä½ã«px, em, remã®ã©ã‚ŒãŒä¸€ç•ª
![[CSS]Media Queriesã§ä½¿ã†å˜ä½ã¯px, em, remã®ã©ã‚ŒãŒé©ã—ã¦ã„ã‚‹ã‹æ¤œè¨¼ -px指定ã¯æ³¨æ„ãŒå¿…è¦](https://cdn-ak-scissors.b.st-hatena.com/image/square/ebb660a3174b5d3836e1ab0370b94c0ac1d1e64a/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201601%2F2016032901.png)
Rethinking Responsive SVG — Smashing Magazine
Responsive SVG icons can be used in a lot of ways. In this article, Ilya Pukhalski digs deeper into Joe Harrison’s responsive icons technique and explores what can be done with SVGs. If you haven’t seen Joe Harrison’s responsive icons technique yet, you’ll most probably be impressed as much as I was when I first discovered it. In this article, I’d like to explore what we can do with SVG beyond “tr
How To Solve Adaptive Images In Responsive Web Design — Smashing Magazine
Some people waste bandwidth by sending high-resolution images to all devices. Others send regular-resolution images, looking less crisp on high-resolution displays. But what we really want to do is find the one solution that sends the image with the most appropriate size and resolution based on the browser and device making the request that can also be made accessible. Adaptive images are the curr
Media Queries (W3C Recommendation 19 June 2012)
Media Queries Level 3 W3C Recommendation, 21 May 2024 More details about this document This Version: https://www.w3.org/TR/2024/REC-mediaqueries-3-20240521/ Latest Version: https://www.w3.org/TR/mediaqueries-3/ Latest Editor Version: https://drafts.csswg.org/mediaqueries-3/ Previous Version: https://www.w3.org/TR/2022/REC-mediaqueries-3-20220405/ History: https://www.w3.org/standards/history/media
SVG and responsive images
Responsive images with svg and CSS Estelle Weyl is testing Responsive Images: Clown Car Technique SVG supports media-queries — related to its parent—, we need responsive images... Estelle provided the code of her experiments , and I've tried to make some tests... and it seems to work. You can see the HTML, CSS and SVG code I used Safari (windows) and Dolphin browser (android 4.2) failed with my ex
Media Queries within SVG - Web Performance Consulting | TimKadlec.com
There has been a lot of interesting chatter regarding SVG as of late, including thorough posts by David Bushell and Chris Coyier. One aspect in particular that is getting quite a bit of attention is the ability to embed media queries within SVG files. Even more amazing is the fact that this was first talked about by Andreas Bovens of Opera all the way back in 2009! The renewed interest in the tech
GitHub - estelle/clowncar: Clown Car Responsive Image Technique
We can use media queries within SVG to serve up the right image. The beauty of the "Clown Car" technique is that all the logic remains in the SVG file. I've called it the "Clown Car" technique since we are including (or stuffing) many images (clowns) into a single image file (car). When you mark up your HTML, you simply add a single call to an SVG file. <img src="awesomefile.svg" alt="responsive i
Media Queries in SVG images
“Wait? What was that Bruce Lawson just said?†That was my reaction last week as I listened to the audio from Bruce’s presentation at Responsive Day Out conference. What had Bruce said that blew my mind? It was the fact that you can embed media queries inside SVG images. Maybe this is common knowledge for everyone else, but I was stunned by the news. Today I finally got a moment to research this fu
CSSメディアクエリã®æ£ã—ã„使ã„方（動画）
メディアクエリをæ£ã—ã使ã†ã¨WebページãŒã©ã®ãƒ‡ãƒã‚¤ã‚¹ã§ã‚‚æ£ã—ã表示ã•ã‚Œã¾ã™ã€‚OSã‚„ç”»é¢ã®å¤§ãã•ã«é–¢ã‚らãšãƒ‡ã‚¶ã‚¤ãƒ³ãŒãƒ¬ã‚¹ãƒãƒ³ã‚·ãƒ–ã«ãªã‚Šã€CSSãŒãƒ¡ãƒ³ãƒ†ãƒŠãƒ³ã‚¹ã—ã‚„ã™ããªã‚Šã¾ã™ã€‚ã“ã®ãƒ“デオã§ã‚µãƒ³ãƒ—ルページを利用ã—ã¦ãƒ¡ãƒ‡ã‚£ã‚¢ã‚¯ã‚¨ãƒªã®æ£ã—ã„使ã„方（ã¤ã¾ã‚Šãƒ–レークãƒã‚¤ãƒ³ãƒˆã®åˆ©ç”¨ï¼‰ã‚’ã”紹介ã—ã¾ã™ã€‚
Operaã®WebKit移行 - fragmentary
å„所ã§æ—¢å ±ã ã‚ã†ã‘ã‚Œã©ã€OperaãŒWebKitã¸ã®ç§»è¡Œã‚’発表ã—ãŸã€‚ Opera gears up at 300 million users 300 million users and move to WebKit WebKitベースã®ãƒ¢ãƒã‚¤ãƒ«ãƒ–ラウザを発表ã¨ã„ã†å™‚ãŒã‚ã£ã¦ã€ã‚ã‚モãƒã‚¤ãƒ«ã ã‘ã‹ã¨æ€ã£ãŸã‚‰å…¨éƒ¨ã ã¨ã€‚é©šã„ãŸã€‚ãりゃ去年å¤ã”ã‚ã‹ã‚‰äººãŒé›¢ã‚ŒãŸã‚Šã€Prestoã®Web標準実装ドã‚ュメントãŒæ›´æ–°ã•ã‚Œãªã‹ã£ãŸã‚Šã™ã‚‹ã‚ã‘ã 。ãµã‚€ã€‚ “WebKitâ€ã¨ã‚ã‚‹ã‘ã‚Œã©ã€Operaソースã®ç™ºè¡¨ã‚’èªã‚€é™ã‚Šã€ã©ã†ã‚„らChromium portã£ã½ã„。Chromiumベースã«ç‹¬è‡ªã®Opera portを作ã£ãŸã‚Šã¯ãªã„よããˆâ€¦â€¦ Chromiumベースã§ã©ã‚Œãらã„Operaフレーãƒãƒ¼ãŒå‡ºã‚‹ã®ã ã‚ã†ã€‚拡張もChromeベースã¨ãªã‚‹ã¨UIã‚‚ãã‚“ãªã«å¤‰ãˆã‚‰ã‚Œãªã„ã ã‚ã†ã—ã€Chromeã«ä¼¼ãŸã‚‚ã®ã«ãªã‚‹ã®ã‹ãªã€‚デスク
レスãƒãƒ³ã‚·ãƒ–・ウェブデザイン - メディアクエリã®ãƒ‘ワーを使ã„ã“ãªã™
+1 ボタン 2 AMP 11 API 3 App Indexing 8 CAPTCHA 1 Chrome 2 First Click Free 1 Google アシスタント 1 Google ニュース 1 Google プレイス 2 Javascript 1 Lighthouse 4 Merchant Center 8 NoHacked 4 PageSpeed Insights 1 reCAPTCHA v3 1 Search Console 101 speed 1 イベント 25 ウェブマスターガイドライン 57 ウェブマスタークイズ 2 ウェブマスターツール 83 ウェブマスターフォーラム10 オートコンプリート 1 ãŠçŸ¥ã‚‰ã› 69 クãƒãƒ¼ãƒ«ã¨ã‚¤ãƒ³ãƒ‡ãƒƒã‚¯ã‚¹ 75 サイトクリニック 4 サイトマップ 15 ã—ã”ã¨æ¤œç´¢ 1 スマートフォン 11 セーフブラウジング 5 ã‚»ã‚ュリティ 1
1
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
)
-ms-high-contrast media feature (Internet Explorer)
スタイルè¨å®š - svgè¦ç´ ã®åŸºæœ¬çš„ãªä½¿ã„æ–¹ã¾ã¨ã‚
{{#tags}}- {{label}}
{{/tags}}