### Install Jekyll Dependencies Source: https://github.com/hteumeuleu/caniemail/blob/main/README.md Install Jekyll and other project dependencies using Bundler. This command should be run after cloning the repository. ```sh bundle install ``` -------------------------------- ### HTML Ordered List with Start Attribute Source: https://github.com/hteumeuleu/caniemail/blob/main/tests/css-list.html HTML ordered list that starts numbering from a specified value. ```html
  1. 5. Item 1 6. Item 2 7. Item 3
``` -------------------------------- ### Set Padding Block Start Source: https://github.com/hteumeuleu/caniemail/blob/main/tests/css-box-model.html Use `padding-block-start` for top padding, equivalent to `padding-top`. ```css padding-block-start:22px; ``` -------------------------------- ### Set Padding Inline Start Source: https://github.com/hteumeuleu/caniemail/blob/main/tests/css-box-model.html Use `padding-inline-start` for left padding, equivalent to `padding-left`. ```css padding-inline-start:22px; ``` -------------------------------- ### CSS :lang() Pseudo-selector Examples Source: https://github.com/hteumeuleu/caniemail/blob/main/tests/css-pseudo-selectors-lang.html Demonstrates how to use the :lang() pseudo-selector to apply styles based on the language of the content. This example targets English, German, and French content. ```css /* General styles */ * { margin: 0; padding: 0; } body { padding: 30px; } h1, h2, p { font-family: Palatino, serif; text-align: center; color:#000; } h1 { padding: 20px; } h2 { padding-bottom: 10px; font-size: 20px; } p { font-size: 18px; padding-bottom: 30px; } /* :lang() pseudo-selector for different languages */ :lang(en), :lang(de), :lang(fr) { color: green; font-weight: 700; } ``` -------------------------------- ### Run Jekyll Development Server Source: https://github.com/hteumeuleu/caniemail/blob/main/README.md Start the Jekyll development server to view the site locally. The site will be available at http://localhost:4000. ```sh bundle exec jekyll serve ``` -------------------------------- ### Clone Can I email Repository Source: https://github.com/hteumeuleu/caniemail/blob/main/README.md Use this command to clone the project repository. Ensure Git is installed on your system. ```sh git clone https://github.com/hteumeuleu/caniemail.git ``` -------------------------------- ### Notes by Number Format Source: https://github.com/hteumeuleu/caniemail/blob/main/CONTRIBUTING.md This is an example of how to define specific notes for individual email clients, keyed by number. ```json "notes_by_num": { "1": "X value is not supported.", ``` -------------------------------- ### HTML Ordered List with Value Source: https://github.com/hteumeuleu/caniemail/blob/main/tests/css-list.html HTML ordered list with a specific starting value for an item. ```html
  1. 1. Item 1 2. Item 2 (value set to 4) 3. Item 3
``` -------------------------------- ### Basic Dark Scheme Styling for .box Source: https://github.com/hteumeuleu/caniemail/blob/main/tests/css-media-prefers-color-scheme.html A simpler example demonstrating how to style a `.box` element with a green background when a dark color scheme is preferred. ```css .box { background:green; } ``` -------------------------------- ### Feature Title Examples Source: https://github.com/hteumeuleu/caniemail/blob/main/CONTRIBUTING.md Feature titles should be concise and end with 'element', 'attribute', or 'property'. ```text // Do's
element background attribute CSS background property // Don'ts HTML section tag HTML background ``` -------------------------------- ### CSS ::first-line Pseudo-element Example Source: https://github.com/hteumeuleu/caniemail/blob/main/tests/css-pseudo-elements.html Illustrates styling the first line of a block-level element with the ::first-line pseudo-element. This can be used for emphasis on the beginning of text. ```css .test-first-line:first-line { background-color: green; } .test-first-line::first-line { background-color: green; } ``` -------------------------------- ### CSS text-align: start Source: https://github.com/hteumeuleu/caniemail/blob/main/tests/css-text-align.html Aligns text to the start of the line, respecting the writing direction. Useful for internationalization. ```css text-align:start; ``` -------------------------------- ### CSS Radial Gradient Example 2 Source: https://github.com/hteumeuleu/caniemail/blob/main/tests/css-background.html Another radial gradient example with specific color stops and transparency, creating a subtle gradient effect. ```css .radical-radial-2 { background: radial-gradient( ellipse at center, rgba(226,226,226,1) 0%, rgba(219,219,219,1) 50%, rgba(209,209,209,1) 51%, rgba(254,254,254,1) 51%, rgba(254,254,254,1) 100%); } ``` -------------------------------- ### Set Border Block Start Source: https://github.com/hteumeuleu/caniemail/blob/main/tests/css-box-model.html Use `border-block-start` for the top border, specifying style, color, and width. ```css border-block-start:solid green 22px ``` -------------------------------- ### Email Client Support Data Format Source: https://github.com/hteumeuleu/caniemail/blob/main/CONTRIBUTING.md This example shows how to format support data for email clients, including version and support level ('y', 'n', 'a', 'u'). Notes can be referenced using '#'. ```json "2019-06":"a #1 #2" ``` -------------------------------- ### Nested Media Query Example Source: https://github.com/hteumeuleu/caniemail/blob/main/tests/css-media.html Shows a simple nested media query structure. Styles within the inner query are applied only if both the outer and inner conditions are met. ```css @media screen { @media screen { .atinat { background: green; } } } ``` -------------------------------- ### HTML Reversed Ordered List with Start Attribute Source: https://github.com/hteumeuleu/caniemail/blob/main/tests/css-list.html HTML ordered list that starts numbering from a specified value and displays in reverse. ```html
  1. 5. Item 1 6. Item 2 7. Item 3
``` -------------------------------- ### Set Margin Block Start Source: https://github.com/hteumeuleu/caniemail/blob/main/tests/css-box-model.html Use `margin-block-start` for top margin, equivalent to `margin-top`. ```css margin-block-start:22px; ``` -------------------------------- ### CSS Media Query for No Preference Source: https://github.com/hteumeuleu/caniemail/blob/main/tests/css-media-prefers-reduced-motion.html This example demonstrates the CSS for when a user has not specified a preference for reduced motion, allowing for standard animations and visual effects. ```css @media (prefers-reduced-motion: no-preference) { .box { background-color: blue !important; } } ``` -------------------------------- ### Using Video as an Image with and Source: https://github.com/hteumeuleu/caniemail/blob/main/tests/video-as-img.html Utilize the HTML `` element with `` tags to provide multiple sources for an image, allowing email clients to choose the most appropriate format. This example shows a fallback image. ```html ``` -------------------------------- ### Set Border Inline Start Source: https://github.com/hteumeuleu/caniemail/blob/main/tests/css-box-model.html Use `border-inline-start` for the left border, specifying style, color, and width. ```css border-inline-start:solid green 22px ``` -------------------------------- ### CSS ::placeholder Pseudo-element Example Source: https://github.com/hteumeuleu/caniemail/blob/main/tests/css-pseudo-elements.html Demonstrates styling the placeholder text in form input fields using the ::placeholder pseudo-element. This allows for custom styling of default input hints. ```css .test-placeholder:placeholder { background-color: green; } .test-placeholder::placeholder { background-color: green; } ``` -------------------------------- ### Set Margin Inline Start Source: https://github.com/hteumeuleu/caniemail/blob/main/tests/css-box-model.html Use `margin-inline-start` for left margin, equivalent to `margin-left`. ```css margin-inline-start:22px; ``` -------------------------------- ### Add New Feature Example Source: https://github.com/hteumeuleu/caniemail/blob/main/CONTRIBUTING.md This snippet demonstrates how to add a new feature by defining a new error message. Ensure new features are well-documented. ```json { "2": "Y value is not supported." } ``` -------------------------------- ### Viewport Meta Tag and Media Query Source: https://github.com/hteumeuleu/caniemail/blob/main/tests/css-media.html Combines a media query with the @viewport rule to control rendering on devices. This example targets a specific class and sets a fixed width. ```css @media screen { .atinatviewport { background: green; } @viewport { width:320px; } } ``` -------------------------------- ### CSS ::before Pseudo-element Example Source: https://github.com/hteumeuleu/caniemail/blob/main/tests/css-pseudo-elements.html Demonstrates the usage of the ::before pseudo-element to insert content before an element's content. This is often used for decorative elements or icons. ```css .test-before:before { content: ":before"; background-color: green; } .test-before::before { content: "::before"; background-color: green; } ``` -------------------------------- ### CSS background-origin: content-box Source: https://github.com/hteumeuleu/caniemail/blob/main/tests/css-background.html Sets the background image to start from the upper left corner of the content area. ```css background-origin: content-box; ``` -------------------------------- ### Basic CSS Attribute Selectors Source: https://github.com/hteumeuleu/caniemail/blob/main/tests/css-selectors-attribute.html Applies a style to elements with a 'style' attribute. This is a basic example of attribute selection. ```css .test0 [style] { background: green !important; } ``` ```css .test1[style] { background: green !important; } ``` ```css .test2 td[style] { background: green !important; } ``` -------------------------------- ### CSS ::first-letter Pseudo-element Example Source: https://github.com/hteumeuleu/caniemail/blob/main/tests/css-pseudo-elements.html Shows how to style the first letter of a block-level element using the ::first-letter pseudo-element. This is commonly used for drop caps. ```css .test-first-letter:first-letter { background-color: green; } .test-first-letter::first-letter { background-color: green; } ``` -------------------------------- ### Apply Styles for Dark Color Scheme Preference Source: https://github.com/hteumeuleu/caniemail/blob/main/tests/css-media-prefers-color-scheme.html Use the `prefers-color-scheme: dark` media query to apply styles when the user's system preference is for a dark color scheme. This example also shows how to override styles for specific elements like `.box`. ```css body { color: #fff; background-color: #333; } .main { color: #fff; background-color: #333; } .box { background-color: green !important; } ``` -------------------------------- ### HTML Video with Poster, Autoplay, Playsinline, Muted, and Controls Source: https://github.com/hteumeuleu/caniemail/blob/main/tests/html-video.html Use this configuration for a video that should automatically play, remain inline on mobile, start muted, and have visible controls, with a fallback poster image. ```html ``` -------------------------------- ### CSS ::after Pseudo-element Example Source: https://github.com/hteumeuleu/caniemail/blob/main/tests/css-pseudo-elements.html Demonstrates the usage of the ::after pseudo-element to insert content after an element's content. Similar to ::before, it's useful for styling and adding elements. ```css .test-after:after { content: ":after"; background-color: green; } .test-after::after { content: "::after"; background-color: green; } ``` -------------------------------- ### Set Inline Margins in HTML Source: https://github.com/hteumeuleu/caniemail/blob/main/tests/css-margin-logical-properties.html Use the `margin-inline` CSS property to set both the start and end inline margins. This example shows setting different values for LTR and RTL contexts. ```html
Lorem ipsum. Lorem ipsum. ``` ```html
Lorem ipsum. Lorem ipsum. ``` -------------------------------- ### Basic CSS with Hover Media Queries Source: https://github.com/hteumeuleu/caniemail/blob/main/tests/css-media-hover.html Applies styles based on device hover capabilities. Use `.sample-text-hover` for specific hover support and `.sample-text-anyhover` for any hover support. ```css body { color: #333; background-color: #fff; } .sample-text { font-size: 26px; text-align: center; padding: 2rem; } @media (hover: none) { .sample-text-hover { background-color: #fab534; } } @media (hover: hover) { .sample-text-hover { background-color: #72ca4f; } } @media (hover: none) { .sample-text-anyhover { background-color: #fab534; } } @media (hover: hover) { .sample-text-anyhover { background-color: #72ca4f; } } ``` -------------------------------- ### Roles on Span Elements Source: https://github.com/hteumeuleu/caniemail/blob/main/tests/html-role.html Examples of ARIA roles applied to span elements. ```html role="presentation" role="application" role="article" role="heading" role="figure" role="img" role="list" role="listitem" role="none" role="textbox" role="button" role="link" ``` -------------------------------- ### Embedded CSS Example Source: https://github.com/hteumeuleu/caniemail/blob/main/tests/css-placement.html CSS styles embedded directly within the HTML document. ```css .body { font-size: 22px; font-family:sans-serif;} .foo-embedded { background: green !important; } ``` -------------------------------- ### Webkit Prefixes Source: https://github.com/hteumeuleu/caniemail/blob/main/tests/css-text-decoration.html Demonstrates the use of vendor prefixes, specifically for Webkit browsers, which may be necessary for older browser compatibility. ```css -webkit- prefixes ``` -------------------------------- ### CSS :nth-child() pseudo-selector Source: https://github.com/hteumeuleu/caniemail/blob/main/tests/css-pseudo-selectors.html Selects elements based on their position among siblings, counting from the start. ```css .nth-child span:nth-child(2n){background:green;} ``` -------------------------------- ### CSS background-origin: border-box Source: https://github.com/hteumeuleu/caniemail/blob/main/tests/css-background.html Sets the background image to start from the upper left corner of the border. ```css background-origin: border-box; ``` -------------------------------- ### Basic CSS Nesting Source: https://github.com/hteumeuleu/caniemail/blob/main/tests/css-nesting.html Demonstrates simple nesting of selectors. Use this for organizing related styles within a parent selector. ```css .test1 { span { background: green; } } ``` -------------------------------- ### Roles on Div Elements Source: https://github.com/hteumeuleu/caniemail/blob/main/tests/html-role.html Examples of ARIA roles applied to div elements for semantic enhancement. ```html role="presentation" ``` ```html role="application" ``` ```html role="article" ``` ```html role="heading" ``` ```html role="figure" ``` ```html role="img" ``` ```html role="list" ``` ```html role="listitem" ``` ```html role="none" ``` ```html role="textbox" ``` ```html role="button" ``` ```html role="link" ``` -------------------------------- ### CSS :nth-of-type() pseudo-selector Source: https://github.com/hteumeuleu/caniemail/blob/main/tests/css-pseudo-selectors.html Selects elements based on their position among siblings of the same type, counting from the start. ```css .nth-of-type span:nth-of-type(2n){background:green;} ``` -------------------------------- ### HTML Video with Autoplay and Fallback Image Source: https://github.com/hteumeuleu/caniemail/blob/main/tests/html-video.html Configure a video to autoplay and show a fallback image. ```html ``` -------------------------------- ### HTML Video with Controls and Fallback Image Source: https://github.com/hteumeuleu/caniemail/blob/main/tests/html-video.html Display a video with default playback controls and a fallback image. ```html ``` -------------------------------- ### CSS Placed in Body Example Source: https://github.com/hteumeuleu/caniemail/blob/main/tests/css-placement.html CSS styles applied directly within the body of the HTML document. ```css .foo-in-body { background: green !important; } ``` -------------------------------- ### Universal and Element Selectors Source: https://github.com/hteumeuleu/caniemail/blob/main/tests/css-selectors.html Demonstrates the universal selector (*) for applying styles to all elements and specific element selectors like 'h1' and 'table'. ```css * { border:2px solid yellow; } ``` ```css h1 { background: green; } ``` ```css table ``` -------------------------------- ### CSS background-origin: padding-box Source: https://github.com/hteumeuleu/caniemail/blob/main/tests/css-background.html Sets the background image to start from the upper left corner of the padding edge. This is the default. ```css background-origin: padding-box; ``` -------------------------------- ### CSS Media Query for Hover Source: https://github.com/hteumeuleu/caniemail/blob/main/tests/css-media-hover.html Demonstrates the basic usage of the `@media (hover)` media query. This targets devices that support hovering. ```css @media (hover) ``` -------------------------------- ### HTML Video with Muted and Fallback Image Source: https://github.com/hteumeuleu/caniemail/blob/main/tests/html-video.html Embed a video that starts muted and displays a fallback image if the video cannot be played. ```html ``` -------------------------------- ### Set hyphenate-limit-chars to a fixed value (alternative) Source: https://github.com/hteumeuleu/caniemail/blob/main/tests/css-hyphenate-limit-chars.html This is another example of setting a fixed maximum number of characters before a hyphenation break. ```css hyphenate-limit-chars: 10; ``` -------------------------------- ### HTML Video with Autoplay, Muted, Controls, and Fallback Image Source: https://github.com/hteumeuleu/caniemail/blob/main/tests/html-video.html Set up a video to autoplay silently with controls, using a fallback image. ```html ``` -------------------------------- ### CSS Radial Gradient Example 1 Source: https://github.com/hteumeuleu/caniemail/blob/main/tests/css-background.html A complex radial gradient with multiple color stops and transparency, creating a layered effect. ```css .radical-radial-1 { background: radial-gradient( ellipse at center, rgba(255,255,255,1) 31%, rgba(255,255,255,1) 32%, rgba(241,111,92,1) 32%, rgba(246,41,12,1) 51%, rgba(231,56,39,1) 100%); } ``` -------------------------------- ### Initialize Matomo Analytics Tracking Source: https://github.com/hteumeuleu/caniemail/blob/main/_includes/analytics.html This script initializes Matomo analytics. Ensure tracker methods are called before 'trackPageView'. ```javascript var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="https://piwik.tilt-studio.net/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '3']); _paq.push(['HeatmapSessionRecording::disable']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); ``` -------------------------------- ### Set border-inline longhand properties Source: https://github.com/hteumeuleu/caniemail/blob/main/tests/css-border-logical-properties.html Control the style, color, and width of the start and end sides of the inline border using longhand properties. ```css border-inline-start-style:dashed; ``` ```css border-inline-end-style:dashed; ``` ```css border-inline-start-color:lime; ``` ```css border-inline-end-color:lime; ``` ```css border-inline-start-width:8px; ``` ```css border-inline-end-width:6px; ``` -------------------------------- ### Run Jekyll for Embed Version Source: https://github.com/hteumeuleu/caniemail/blob/main/README.md Build the embed version of the site by specifying a configuration file. This is used for the embed.caniemail.com site. ```sh bundle exec jekyll serve --config _config.embed.yml ``` -------------------------------- ### Conic Gradient Source: https://github.com/hteumeuleu/caniemail/blob/main/tests/css-gradients.html Creates a conic gradient, which sweeps through colors around a center point. This example shows a simple transition through several colors. ```css .test7 { background: conic-gradient(red, orange, yellow, green, blue); background-image: conic-gradient(red, orange, yellow, green, blue); } ``` -------------------------------- ### Apply Styles for Dark Interface Preference Source: https://github.com/hteumeuleu/caniemail/blob/main/tests/css-media-prefers-color-scheme.html Use the `prefers-dark-interface` media query to apply styles when the user's system preference is for a dark interface. This is a more general query than `prefers-color-scheme: dark`. ```css body { color: #fff; background-color: #333; } .main { color: #fff; background-color: #333; } ``` -------------------------------- ### Style HTML Abbr Element with CSS Source: https://github.com/hteumeuleu/caniemail/blob/main/tests/html-abbr.html Apply CSS rules to style the HTML element. This example sets the color of abbreviations to red. ```css element abbr { color: red; } ``` -------------------------------- ### Set Aspect Ratio to 1:1 with Fraction Source: https://github.com/hteumeuleu/caniemail/blob/main/tests/css-aspect-ratio.html Use a fraction to define a 1:1 aspect ratio. ```css aspect-ratio:1 / 1; ``` -------------------------------- ### Using Video as an Image with Tag Source: https://github.com/hteumeuleu/caniemail/blob/main/tests/video-as-img.html Embed a video file directly as an image source using the `` tag. Ensure the video format is supported by email clients. ```html ``` -------------------------------- ### Basic Screen Media Query Source: https://github.com/hteumeuleu/caniemail/blob/main/tests/css-media.html Applies styles when the viewport width matches the screen media type. This is a fundamental media query for web responsiveness. ```css body { margin:0;} div {background: red;padding:11px; margin:11px; font-size: 18px; border:2px solid black; } @media screen { .screen { background: green; } } ``` -------------------------------- ### CSS !important Without Space Source: https://github.com/hteumeuleu/caniemail/blob/main/tests/css-important.html Example of using !important immediately after the declaration value, without a preceding space. This syntax is also valid in CSS. ```css .test5 { background:green!important; color:white!important; } ``` -------------------------------- ### Global CSS Display Values Source: https://github.com/hteumeuleu/caniemail/blob/main/tests/css-display.html Demonstrates global CSS keyword values for the 'display' property. ```css display: inherit; ``` ```css display: initial; ``` ```css display: revert; ``` ```css display: unset; ``` -------------------------------- ### Basic @supports Rule Source: https://github.com/hteumeuleu/caniemail/blob/main/tests/css-at-supports.html Use @supports to apply styles only if a specific CSS feature is supported by the browser. This example checks for 'font: 1em sans-serif'. ```css @supports in emails body { font:1em sans-serif; } ``` -------------------------------- ### Display Grid Source: https://github.com/hteumeuleu/caniemail/blob/main/tests/css-box-model.html Use `display: grid;` to create a grid container for stacked elements. ```css display:grid ``` -------------------------------- ### CSS clear: inline-start property Source: https://github.com/hteumeuleu/caniemail/blob/main/tests/css-box-model.html Prevents an element from floating alongside elements floated at the start of the inline axis. This is equivalent to `clear: left` in left-to-right languages. ```css clear:inline-start; ``` -------------------------------- ### Set Aspect Ratio to 1:2 with Fraction Source: https://github.com/hteumeuleu/caniemail/blob/main/tests/css-aspect-ratio.html Use a fraction to define a 1:2 aspect ratio. ```css aspect-ratio:1 / 2; ``` -------------------------------- ### CSS Background Origin: Content Box Source: https://github.com/hteumeuleu/caniemail/blob/main/tests/css-background.html Sets the origin of the background image to the content-box. The background image starts positioning relative to the inside edge of the padding. ```css .background-origin-content-box { background-origin: content-box; } ``` -------------------------------- ### CSS Background Origin: Padding Box Source: https://github.com/hteumeuleu/caniemail/blob/main/tests/css-background.html Sets the origin of the background image to the padding-box. The background image starts positioning relative to the inside edge of the border. ```css .background-origin-padding-box { background-origin: padding-box; } ``` -------------------------------- ### HTML Definition List Source: https://github.com/hteumeuleu/caniemail/blob/main/tests/css-list.html Basic HTML definition list with terms and descriptions. ```html
Denim (semigloss finish) Ceiling Denim (eggshell finish) Evening Sky (eggshell finish) Layered on the walls ``` -------------------------------- ### Nested Min-Width Media Query Source: https://github.com/hteumeuleu/caniemail/blob/main/tests/css-media.html Demonstrates nesting a media query within another. Styles are applied only when both the outer and inner conditions are met. ```css @media screen and (min-width:0px) { @media screen and (min-width:0px) { .min-width-nested { background: green; } } } ``` -------------------------------- ### CSS Background Origin: Border Box Source: https://github.com/hteumeuleu/caniemail/blob/main/tests/css-background.html Sets the origin of the background image to the border-box. The background image starts positioning relative to the outside edge of the border. ```css .background-origin-border-box { background-origin: border-box; } ``` -------------------------------- ### Min-Width Media Query Source: https://github.com/hteumeuleu/caniemail/blob/main/tests/css-media.html Applies styles when the viewport width is at least the specified minimum value. Useful for desktop-first responsive design. ```css @media screen and (min-width:0px) { .min-width { background: green; } } ``` -------------------------------- ### HTML Video with Playsinline, Muted, Controls, and Fallback Image Source: https://github.com/hteumeuleu/caniemail/blob/main/tests/html-video.html Embed a video that plays inline on mobile devices, starts muted, and includes controls, with a fallback image. ```html ``` -------------------------------- ### Display Email Clients by Order Source: https://github.com/hteumeuleu/caniemail/blob/main/_includes/settings.html Sorts and iterates through email clients based on their display order. It then lists each client's name and their associated platforms. ```html {% assign clients = site.clients | sort:"display_order" %} {% for client in clients %}* {{ site.data.nicenames.family[client.slug] | default: client.slug | escape_once }} {% for platform in client.platforms %}* {{ site.data.nicenames.platform[platform] | default: platform | escape_once }} {% endfor %} {% endfor %} ``` -------------------------------- ### CSS linear-gradient (to transparent) Source: https://github.com/hteumeuleu/caniemail/blob/main/tests/css-background.html Creates a linear gradient transitioning from transparent to black. ```css background-image: linear-gradient(to left, transparent, black); ``` -------------------------------- ### Using the 'formmethod' Attribute Source: https://github.com/hteumeuleu/caniemail/blob/main/tests/html-forms-attributes.html The `formmethod` attribute specifies the HTTP method to use when sending form-data. It can be `get` or `post`. This attribute overrides the `method` attribute of the associated form. ```html ``` -------------------------------- ### Min-Width and Max-Width Media Query Source: https://github.com/hteumeuleu/caniemail/blob/main/tests/css-media.html Applies styles when the viewport width falls within a specific range. This is a common technique for creating responsive layouts. ```css @media screen and (min-width:0px) and (max-width:9999px) { .min-width-max-width { background: green; } } ``` -------------------------------- ### CSS Inset Inline Longhand Properties Source: https://github.com/hteumeuleu/caniemail/blob/main/tests/css-inset.html Define the start and end offsets for the inline direction using 'inset-inline-start' and 'inset-inline-end'. These correspond to left and right in horizontal writing modes. ```css inset-inline-start:10px; inset-inline-end:30px; ``` -------------------------------- ### CSS Two-Value Syntax Display Source: https://github.com/hteumeuleu/caniemail/blob/main/tests/css-display.html Illustrates the two-value syntax for the CSS 'display' property. ```css display: block flow; ``` ```css display: block flex; ``` ```css display: block grid; ``` ```css display: inline flow; ``` ```css display: inline flow-root; ``` ```css display: inline flex; ``` ```css display: inline grid; ``` -------------------------------- ### CSS Inset Block Longhand Properties Source: https://github.com/hteumeuleu/caniemail/blob/main/tests/css-inset.html Define the start and end offsets for the block direction using 'inset-block-start' and 'inset-block-end'. These correspond to top and bottom in horizontal writing modes. ```css inset-block-start:40px; inset-block-end:30px; ``` -------------------------------- ### Set hyphenate-limit-chars with a fixed minimum and automatic maximum Source: https://github.com/hteumeuleu/caniemail/blob/main/tests/css-hyphenate-limit-chars.html This example sets a fixed minimum number of characters before a hyphenation break, while allowing the browser to determine the maximum number of characters. ```css hyphenate-limit-chars: 10 auto; ``` -------------------------------- ### Apply Solid Outline with RGB Color Source: https://github.com/hteumeuleu/caniemail/blob/main/tests/css-outline.html Use the `outline` shorthand to apply an 8px solid outline using an RGB color value. This allows for precise color control. ```css outline:8px solid rgb(255,0,0); ```