Topic on Extension talk:TemplateStyles/Flow

The Wiki I edit is on MW 1.31.7 with plans to update to 1.35 in mid-year. Our sanitization interpreter seems to be rather out-of-date: transform:translateX(x); is marked illegal – there is a workaround with translate(x,0), so we can still make do with it.

My main problem comes from transform:translate(x1,y1) translate(x2,y2); being marked illegal – In fact, it appears that any combination of multiple transform functions inside the same transform property is considered illegal.

I hope this can be (or is already, considering our geriatric MW version) addressed in a newer version of TemplateStyles; in the mean time, I wonder if there is any workarounds I can try?

My particular use case...

I am trying to create a CSS animation where a longer string of internal link scrolls from the first letter to the last inside a narrower container. If I boil down the HTML and CSS a bit, they would look like:

<div class='outer-container'>
...
  <span class='container long-text-scroll'>
    [[Link|A long string of descriptions]]
  </span>
</div>

/*.outer-container has position:relative*/
...
.container {
    position: absolute;
    right: 0;
    bottom: 18px;
    width: 60px;
    height: 16px;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
}

@keyframes long-text-scroll {
     0% {opacity:1;transform:translate(0,0);}
    75% {opacity:1;transform:translate(-100%,0) translate(60px,0);}
    85% {opacity:1;transform:translate(-100%,0) translate(60px,0);}
    87% {opacity:0;transform:translate(-100%,0) translate(60px,0);}
    88% {opacity:0;transform:translate(0,0);}
    90% {opacity:1;transform:translate(0,0);}
    99% {opacity:0;transform:translate(-100%,0) rotate(45deg);}
}

.outer-container .long-text-scroll>a {
    position: absolute;
    top: 0;
    left: 0;
    animation-name: long-text-scroll;
    animation-duration: 6s;
    animation-timing-function: cubic-bezier(0.15, 0, 0.85, 1);
    animation-iteration-count: infinite;
}

This style is applied to multiple instances of texts where they are longer than 60px. I believe that for the first-to-last-letter effect, I must use multiple translate functions in the same transform function: the -100% to align the end of text to the left edge, the +60px to move the end back to the right edge. The animation keyframe can only be defined in a style sheet, so I can't use inline definitions; Perhaps I can ask my SysOp to use widget, but that is not ideal.

Thanks in advance for any suggestions.

Old-style quick and dirty way: create a CSS class inside your common.css and then use it.

The CSS sanitizer is largely stuck in the state in which it was created, I doubt updating the extension would change anything. If you feel adventurous, you can update the rules yourself (see Extension:TemplateStylesExtender for an example; it can be done without changing extension code). Otherwise, as Valerio says, you'll have to define the rule elsewhere.

I decided to try out the newest copy of TemplateStyles as of yesterday on my local testing MediaWiki instance, and what I have up there triggers no warning, and I saved it as sanitized CSS with no complaint from the server. Though I am not familiar with php syntaxes, StylePropertySanitizer.php seems to contain entries that addresses my issue (combining multiple transform functions inside the same transform property).

Meanwhile, the wiki site I edit won't even let me use percentages in translate()... I will just assume that this is caused by a really out-of-date TemplateStyles build and pepper the SysOp about updates then.

I don't have the privilege to edit site-wide common.css, and using it seems to be a bit overkill as the animation will probably affect only one or two pages – especially when the planned update should do the trick.

Anyways, thank you Tgr and Valerio for the help!

There was a big update three years ago which included transforms. I thought that was pre 1.31 but apparently not... apologies for the misleading advice.