CodePen Embed - PostCSS Preset Env Demo

Live

This Pen is owned by Jonathan Neal on CodePen.

External CSS

https://codepen.io/jonneal/pen/faa36d37dc39c455ab572f228429eb59.css

External JavaScript

This Pen doesn't use any external JavaScript resources.

{"__browser":{"device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{"gridIframeSandboxAttributes":"allow-forms allow-modals allow-pointer-lock allow-presentation allow-same-origin allow-scripts"},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; microphone; midi; payment; vr","iframe_sandbox":"allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation"},"__graphql":{"data":null,"errors":[{"message":"Cannot return null for non-nullable field Query.sessionUser"}]},"__pay_stripe_public":"pk_NgCjQmQs7wXOFmfNC0LKMgEkmlThn","__pay_braintree_env":"production","__boomboom":{"serve_url":"https://cdpn.io/cp/internal/boomboom","store_url":"https://codepen.io/cp/internal/boomboom/store"},"__pageType":"embed","__item":"{\"editor_settings\":{\"auto_run\":true,\"autocomplete\":false,\"code_folding\":true,\"css_pre_processor\":\"none\",\"css_prefix\":\"neither\",\"css_starter\":\"neither\",\"emmet_active\":true,\"font_size\":\"14\",\"font_type\":\"monaco\",\"format_on_save\":false,\"html_pre_processor\":\"none\",\"indent_with\":\"spaces\",\"js_pre_processor\":\"none\",\"key_bindings\":\"normal\",\"line_numbers\":true,\"line_wrapping\":true,\"match_brackets\":true,\"snippets\":{\"markupSnippets\":{},\"stylesheetSnippets\":{}},\"tab_size\":\"2\",\"theme\":\"twilight\",\"id\":\"WZdygy\",\"auto_save\":true},\"hashid\":\"WZdygy\",\"itemType\":\"pen\",\"resources\":[{\"url\":\"https://codepen.io/jonneal/pen/faa36d37dc39c455ab572f228429eb59.css\",\"order\":0,\"resource_type\":\"css\",\"par_content\":\"\"}],\"tags\":[],\"id\":18423393,\"user_id\":21768,\"html\":\"\",\"css\":\"@custom-media --viewport-medium (width <= 50rem);\\n@custom-selector :--heading h1, h2, h3, h4, h5, h6;\\n\\n:root {\\n  --fontSize: 1rem;\\n  --mainColor: #12345678;\\n  --secondaryColor: lab(32.5 38.5 -47.6 / 90%);\\n}\\n\\nhtml {\\n  overflow: hidden auto;\\n}\\n\\n@media (--viewport-medium) {\\n  body {\\n    color: var(--mainColor);\\n    font-family: system-ui;\\n    font-size: var(--fontSize);\\n    line-height: calc(var(--fontSize) * 1.5);\\n    overflow-wrap: break-word;\\n    padding-inline: calc(var(--fontSize) / 2 + 1px);\\n  }\\n}\\n\\n:--heading {\\n  margin-block: 0;\\n}\\n\\n.hero:matches(main, .main) {\\n  background-image: image-set(\\\"img/background.jpg\\\" 1x, \\\"img/background-2x.jpg\\\" 2x);\\n}\\n\\na {\\n  color: rgb(0 0 100% / 90%);\\n\\n  &:hover {\\n    color: rebeccapurple;\\n  }\\n}\",\"parent\":14876709,\"js\":\"\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"none\",\"js_pre_processor\":\"none\",\"html_classes\":\"\",\"css_starter\":\"neither\",\"css_prefix_free\":null,\"css_external\":null,\"js_library\":null,\"js_modernizr\":null,\"js_external\":null,\"created_at\":\"2017-10-05T19:12:10.000Z\",\"updated_at\":\"2018-09-20T12:09:08.000Z\",\"session_hash\":\"3c1c1d459d33be02e954350f8156f2ab\",\"title\":\"PostCSS Preset Env Demo\",\"description\":\"\",\"slug_hash\":\"WZdygy\",\"head\":\"<meta name=\\\"viewport\\\" content=\\\"width=device-width,initial-scale=1,shrink-to-fit=no\\\"><script src=\\\"https://unpkg.com/regenerator-runtime@0.12.1/runtime.js\\\"></script><script src=\\\"https://csstools.github.io/postcss-preset-env/codepen.bundle6.js\\\"></script>\",\"private\":false,\"has_animation\":false,\"css_pre_processor_lib\":\"\",\"checksum\":0,\"screenshot_uuid\":\"3e126826-46d1-4a03-9a77-1eda2f4f41e9\",\"team_id\":0,\"css_prefix\":\"neither\",\"template\":true,\"js_module\":false,\"pen_hash\":null}","__jwt":"eyJhbGciOiJIUzI1NiJ9.eyJjbGFpbXMiOnsidXNlcl9pZCI6MX0sImV4cCI6MTYzNDk1NjI1M30.L4vOk4RA4cb1425WbB7VvlEd73XAaaClDSx1R8UIvTE","__processorsMap":{"autoprefixer":"autoprefixer-10","babel":"babel-7","coffeescript":"coffeescript-2","format-1":"format-1","flutter":"flutter-1","haml":"haml-4","less":"less-3","lint-1":"lint-1","livescript":"livescript-1","markdown":"markdown-11","postcss":"postcss-7","pug":"pug-2","sass":"sass-1","scss":"sass-1","sass-ruby-3":"sass-ruby-3","sass-ruby-compass-3":"sass-ruby-compass-3","slim":"slim-3","stylus":"stylus-0","typescript":"typescript-4","vue":"vue-2","vue3":"vue-3"},"__favicon_mask_icon":"https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg","__favicon_shortcut_icon":"https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico","__path_to_iframe_console_runner":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeConsoleRunner-d8236034cc3508e70b0763f2575a8bb5850f9aea541206ce56704c013047d712.js","__path_to_iframe_refresh_css":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-4793b73c6332f7f14a9b6bba5d5e62748e9d1bd0b5c52d7af6376f3d1c625d7e.js","__path_to_iframe_runtime_errors":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRuntimeErrors-4f205f2c14e769b448bcf477de2938c681660d5038bc464e3700256713ebe261.js","__path_to_processor_worker":"https://cpwebassets.codepen.io/assets/packs/router.js","__path_to_stop_execution_on_timeout":"https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js","__pen_normalize_css_url":"https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css","__pen_prefix_free_url":"https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js","__pen_reset_css_url":"https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"}