Cross-domain with CSS3: CSST (CSS Text Transformation)

0
JavaScript

CSST (CSS Text Transformation)

Getting content through CSS3’s content property.

  1. Dynamically create a link element with JS and insert it into the document to request a CSS file.

  2. Use computedStyle = window.getComputedStyle to get the style object of a specified element.

  3. Use computedStyle.content to get the content.

The CSS file that the server can return:

  @keyframes anima {
    from {}
    to {
      opacity: 0;
    }
  }
  @-webkit-keyframes anima {
    from {}
    to {
      opacity: 0;
    }
  }
  #CSST {
    content: "${text}";
    animation: anima 2s;
    -webkit-animation: anima 2s;
  }

${text} is the data we want to populate.

Listen for the animationstart/webkitAnimationStart event to determine if the CSS has finished loading.

Set animation on the #CSST element.

JS logic:

function handle () {

  var computedStyle = getComputedStyle(span, false);

  var content = computedStyle.content;

  console.log('content: %s', content);

  var match = content.match(/[\w+=\/]+/);

  // base64 decode
  if (match) {
      try {
          content = decodeURIComponent(escape(atob(match[0])));
      } catch (ex) {
          fn(ex);
          return;
      }
  }

  return content
}


var CSST = document.getElementById('CSST');

//listen for events
CSST.addEventListener('animationstart', handler, false);

CSST.addEventListener('webkitAnimationStart', handler, false);

When the element’s animation starts, you can get the content from the content property.

Article Link:

/en/archive/css-cross-domain/

# Related Articles