What is the function of the blocking attribute in the <style> element?

The blocking attribute specifies operations to be blocked during resource fetching.

The blocking attribute in the <style> element indicates which operations should be blocked while fetching critical subresources, like @import-ed stylesheets. This can include blocking rendering or other operations to ensure that essential styles are loaded before the page is displayed, preventing flash of unstyled content (FOUC).

<style blocking="render">
  @import url('styles.css');
</style>