13-Dec

CSS Christmas card - Part 2: But can you use this?

2 min read

By Dag Frode Solberg

December 13, 2019

During standup the following day, Dag was asked to share his progress on the team Christmas card. He agreed to share it on their primary communication channel without slacking too much.

He shared his work and waited for feedback. It did not take long before he was asked if he had an abstract period. "Why do you ask?" he wrote in confusion. Selbekk, their team leader, answered with a screenshot and the comment "did you test it in Safari?". He had not.

"You know. You could use Can I use to look up browser compatibility," Selbekk suggested. Dag did as suggested and found the following table:

Can I use - clip-path

"Okay, no support for IE or Edge. That might be okay, most of the receivers of the card are using Mac or are developers, so they probably use another web browser. Hm, light-green means partially supported. So I have to see if Safari supports it." Dag hovered the relevant box and got the support note "Partial support with the prefix -webkit-."

"Hmm… Let's see if adding -webkit-. to clip-path makes it work in Safari!"

#three{ position:absolute; left:50px; top:100px; width:400px; height:700px; background-image: linear-gradient(5deg, #1a9900 25%, #00ab17 25%, #00ab17 50%, #1a9900 50%, #1a9900 75%, #00ab17 75%, #00ab17 100%); background-size: 49.44px 68.05px; clip-path: polygon(50% 0%, 80% 30%, 70% 30%, 90% 50%, 80% 50%, 100% 70%, 60% 70%, 60% 80%, 40% 80%, 40% 70%, 0% 70%, 20% 50%, 10% 50%, 30% 30%, 20% 30%); -webkit-clip-path: polygon(50% 0%, 80% 30%, 70% 30%, 90% 50%, 80% 50%, 100% 70%, 60% 70%, 60% 80%, 40% 80%, 40% 70%, 0% 70%, 20% 50%, 10% 50%, 30% 30%, 20% 30%); }

Dag updated the code and tried to rerun the card in Safari. The card worked as expected this time.

"It's been some time since I've looked into browser compatibility," Dag thought. "Either I've forgotten to test, or it seems like the build has just fixed the prefixes by itself."

Dag spent the remaining time he had left for the side project reading up on CSS builds and auto prefixing.

To be continued tomorrow.