Re: [csswg-drafts] [css-sizing] Adding a 'size' shorthand for 'width'/'height'

• From: Tommy Hodgins via GitHub <sysbot+gh@w3.org>
• Date: Thu, 17 Aug 2017 19:35:01 +0000
• To: public-css-archive@w3.org
• Message-ID: <issue_comment.created-323172428-1502998495-sysbot+gh@w3.org>

I was inspired to build a little demo of this using `--size`:

```html
<div>Demo</div>

<style>
    div {
    background: lime;
    --size: 50vmin;
  }
</style>

<script>
  function sizer() {

    var tag = document.querySelectorAll('body *')

    tag.forEach(function(tag) {

      var currentStyle = window.getComputedStyle(tag)
      var sizeProperty = currentStyle.getPropertyValue('--size')

      tag.style.width = sizeProperty
      tag.style.height = tag.offsetWidth + 'px'

    })

  }

  window.addEventListener('load', sizer)
  window.addEventListener('resize', sizer)
  window.addEventListener('input', sizer)
  window.addEventListener('click', sizer)
</script>
```

Demo: https://codepen.io/tomhodgins/pen/WEdmMM

-- 
GitHub Notification of comment by tomhodgins
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/820#issuecomment-323172428 using your GitHub account

Received on Thursday, 17 August 2017 19:35:01 UTC