I have made a shortcut on iPhone which retrieves some data from a web service. I want to display this data, which fits into a table, for the user to view.
My shortcut is building an HTML page in a Text variable, with the data inserted into an HTML table.
I want to use CSS to control the appearance of the table, so I have made a CSS file in the Shortcuts folder and made the HTML reference it.
I cannot figure out how to get Safari to display this. I tried saving the HTML as a file, but it seems that it does not use the CSS when rendering it. I tried converting the HTML to Rich Text, but that also seems to ignore the CSS. I also tried unsuccessfully to create a data:text/html URL and open that; still no sign that it is using my CSS.
I think my HTML and CSS are good: if I view them from iCloud in a PC broswer, the HTML is styled as I would expect. But I cannot get it to work on Safari/iOS
Did you try putting the CSS in the ‘head’ of the HTML file itself
Thanks for replying. Yes, I have this at the top of my HTML
<link href="styles.css" rel="stylesheet" media="all" />
Ah perhaps you meant to put the CSS inline… no I haven’t tried that but I will
Your web page isn’t being served from your Shortcuts folder via a web server. It is just rendering a standalone page, so your path to the CSS file is not pointing where you think it is. I t will probably be in some temporary file path where Shortcuts builds the page to preview.
If you hosted your CSS online and could access it via a URL, you could use that fully qualified URL in your HTML,
If you want to work locally without any web server, then embedding the CSS is the way to go.
Howevrr, if you want to reuse the CSS across multiple shortcuts, and work locally (no online hosting of the CSS), you do have some options:
- Build your rendering processing separately in a second shortcut and pass in the data to display to it.
- Include the CSS in your HTML via reading in the content from your existing file, and inserting the content.
- Include the CSS in your HTML via a persistent variable using say Data Jar as your Shortcuts storage utility, and inserting ithe content.
Thanks. I ended up just inlining the CSS into the HTML and it renders as I expect now. I will eliminate the CSS file I was using.
Yes. Inline is what I meant.