deploy: 510b6d1

cheatsheets/web/svg.html

@@ -211,7 +211,7 @@ <h3 id="image-tag">Image Tag</h3>
   <li><strong>Cons</strong>:
     <ul>
       <li>Limited control over styles and animations.</li>
-      <li>Requires an additional HTTP request.</li>
+      <li>Requires an additional HTTP request, which can fail.</li>
     </ul>
   </li>
 </ul>
@@ -231,8 +231,12 @@ <h3 id="object-tag">Object Tag</h3>
   </li>
   <li><strong>Cons</strong>:
     <ul>
-      <li>Limited browser support for some features.</li>
       <li>More complex than using an <code class="language-plaintext highlighter-rouge">&lt;img&gt;</code> tag.</li>
+      <li>Requires an additional HTTP request, which can fail.</li>
+      <li><strong>Event Propagation</strong>: Click events may be captured by the <code class="language-plaintext highlighter-rouge">&lt;object&gt;</code>, preventing them from reaching the <code class="language-plaintext highlighter-rouge">&lt;button&gt;</code>.</li>
+      <li><strong>CSS Styles</strong>: Styles like <code class="language-plaintext highlighter-rouge">pointer-events: none;</code> can make the SVG unresponsive to clicks.</li>
+      <li><strong>Browser Compatibility</strong>: Different browsers may handle <code class="language-plaintext highlighter-rouge">&lt;object&gt;</code> elements inconsistently.</li>
+      <li><strong>Accessibility</strong>: <code class="language-plaintext highlighter-rouge">&lt;object&gt;</code> may not be as accessible as other methods for screen readers.</li>
     </ul>
   </li>
 </ul>

cheatsheets/web/svg.md

@@ -39,7 +39,7 @@ Choose the method that best fits your project needs based on control, complexity
   - Keeps HTML clean and minimal.
 - **Cons**:
   - Limited control over styles and animations.
-  - Requires an additional HTTP request.
+  - Requires an additional HTTP request, which can fail.
 
 ### Object Tag
 
@@ -51,8 +51,12 @@ Choose the method that best fits your project needs based on control, complexity
   - Allows for fallback content if SVG fails to load.
   - Can be styled with CSS.
 - **Cons**:
-  - Limited browser support for some features.
   - More complex than using an `<img>` tag.
+  - Requires an additional HTTP request, which can fail.
+  - **Event Propagation**: Click events may be captured by the `<object>`, preventing them from reaching the `<button>`.
+  - **CSS Styles**: Styles like `pointer-events: none;` can make the SVG unresponsive to clicks.
+  - **Browser Compatibility**: Different browsers may handle `<object>` elements inconsistently.
+  - **Accessibility**: `<object>` may not be as accessible as other methods for screen readers.
 
 ### SVG as a Background Image
 

feed.xml

@@ -1 +1 @@
-<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="4.3.3">Jekyll</generator><link href="https://michaelcurrin.github.io/dev-cheatsheets/feed.xml" rel="self" type="application/atom+xml" /><link href="https://michaelcurrin.github.io/dev-cheatsheets/" rel="alternate" type="text/html" /><updated>2024-08-28T14:04:58+00:00</updated><id>https://michaelcurrin.github.io/dev-cheatsheets/feed.xml</id><title type="html">Dev Cheatsheets</title><subtitle>A collection of code snippets and CLI guides for quick and easy reference while coding</subtitle><author><name>Michael Currin</name></author></feed>
+<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="4.3.3">Jekyll</generator><link href="https://michaelcurrin.github.io/dev-cheatsheets/feed.xml" rel="self" type="application/atom+xml" /><link href="https://michaelcurrin.github.io/dev-cheatsheets/" rel="alternate" type="text/html" /><updated>2024-08-28T14:14:08+00:00</updated><id>https://michaelcurrin.github.io/dev-cheatsheets/feed.xml</id><title type="html">Dev Cheatsheets</title><subtitle>A collection of code snippets and CLI guides for quick and easy reference while coding</subtitle><author><name>Michael Currin</name></author></feed>