css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

Comments

  1. How did you come up with that? Really interesting :)

  2. Interesting side effect of Element.animate() :)

  3. in Firefox actually !important wins the battle.

    in Edge u dont even need that (because animate is not supported there yet)

  4. In fact, there is the way to do this trick in Firefox, too (as well as in IE11/Edge). As far as I understand, Firefox's behavior is correct, and other browsers violate the CSS Cascade 3/4 spec.

    According to the spec, the order of priority of styles based on origin and importance is the following:

    1. Transition declarations
    2. Important user agent declarations
    3. Important user declarations
    4. Important override declarations
    5. Important author declarations
    6. Animation declarations
    7. Normal override declarations
    8. Normal author declarations
    9. Normal user declarations
    10. Normal user agent declarations

    Styles set via Animation API should count as Animation declarations and therefore shouldn't override important author declarations (like CSS keyframe animations and unlike transitions). But currently only Firefox treats it this way.

    P.S. There is an article (in Russian) that explains the topic: http://css-live.ru/articles-css/up-the-cascade-css-superhero-challenge.html

  5. Challenge accepted 🔥🔥🔥

    ie11 pfff ei11

  6. Really interesting

  7. This is pure evil!

  8. Not so hard, you left some "exploits" . One of them:

    Add the following property to the #locked element in your devtools:

    filter: hue-rotate(90deg)

    Given your browser supports CSS filters.

    The borg has came

  9. Nice, you can beat it with background-image: linear-gradient(red, red);

  10. background-image of a solid color wins

  11. @AttilaVM nice, but that's not technically changing the original property or the background color :)

    @retyui good catch! Apparently just Chrome for now, and IE+WebKit don't support Web Animations yet.

    @davidhartley, smart, but that's technically not a color, but a generated background image :)

  12. Hahaha

    Firefox:

    Chrome: (I also added a filter on the image so that it would look normal ^^)

    and it's even easier if you find a way to disable JavaScript

  13. Trololol

    Works in Chrome too efficiently. Well played.

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.
Loading...
Loading...