Individuelle CSS-Transformations-Eigenschaften in Safari Technology Preview

Der WebKit-Blog beschreibt, wie man individuelle CSS-Transformations-Eigenschaften in der neuesten Version von Safari Technology Preview verwendet. Dies bringt den Browser in Einklang mit der CSS Transforms Module Level 2-Spezifikation, die die Funktionen translate(), rotate() und scale() aus der transform-Eigenschaft in eigene individuelle Eigenschaften aufteilt: translate, scale und rotate.

Anstatt diese drei Funktionen in der transform-Eigenschaft zu verketten,

.some-element {
  transform: translate(50px 50px) rotate(15deg) scale(1.2);
}

…können wir sie einzeln als eigene Eigenschaften schreiben

.some-element {
  translate: 50px 50px;
  rotate: 15deg;
  scale: 1.2;
}

Wenn Sie wie ich sind, springt Ihnen sofort die Frage in den Sinn: „Warum zum Teufel sollten wir MEHR Codezeilen schreiben?“ Ich meine, wir sind es gewohnt, dass einzelne Eigenschaften zu Untereigenschaften einer Kurzschreibweise werden, nicht umgekehrt, wie wir es bei background, border, font, margin, padding, place-items und so weiter gesehen haben.

Aber das WebKit-Team nennt einige gute Gründe, warum wir das tun wollen

• Es ist einfacher, eine einzelne Eigenschaft zu schreiben, wenn nur eine Funktion benötigt wird, wie z. B. scale: 2; anstelle von transform: scale(2);.
• Es gibt deutlich weniger Sorge, versehentlich andere transform-Eigenschaften zu überschreiben, wenn sie verkettet sind.
• Es ist verdammt viel einfacher, eine Keyframe-Animation für eine einzelne Eigenschaft zu ändern, anstatt Zwischenwerte „vorab zu berechnen“ und „neu zu berechnen“, wenn sie mit transform verkettet sind.
• Wir erhalten eine feinere Kontrolle über das Timing und die Keyframes einzelner Eigenschaften.

Der Beitrag weist auch auf einige hilfreiche Tipps hin. So werden die neuen individuellen Transformations-Eigenschaften zuerst angewendet – translate, rotate und scale, in dieser Reihenfolge – bevor die Funktionen in der transform-Eigenschaft angewendet werden.

Oh, und wir dürfen die Browserunterstützung nicht übersehen! Sie ist zum Zeitpunkt der Erstellung extrem begrenzt… im Grunde nur auf Safari Technology Preview 117 und Firefox 72 und höher für mickrige 3,9 % globale Unterstützung

• translate
• rotate
• scale

Der Beitrag schlägt vor, @supports zu verwenden, wenn Sie die Eigenschaften nutzen möchten

@supports (translate: 0) {
  /* Individual transform properties are supported */
  div {
    translate: 100px 100px;
  }
}

@supports not (translate: 0) {
  /* Individual transform properties are NOT supported */
  div {
    transform: translate(100px, 100px);
  }
}

Das ist das Codebeispiel, das direkt aus dem Beitrag übernommen wurde. Die Modifizierung dieses Beispiels kann uns helfen, die not-Operator zu vermeiden. Ich bin mir nicht sicher, ob das eine Verbesserung des Codes ist oder nicht, aber es fühlt sich eher wie progressive Enhancement an, etwas wie dieses zu tun

div {
  transform: translate(100px, 100px);
}

@supports (translate: 0) {
  /* Individual transform properties are supported */
  div {
    transform: none;
    translate: 100px 100px;
  }
}

Auf diese Weise bereinigen wir die Kurzschreibweisen und machen Platz für die individuellen Eigenschaften, aber nur, wenn sie unterstützt werden.