{"id":6688,"date":"2014-09-24T00:42:25","date_gmt":"2014-09-24T04:42:25","guid":{"rendered":"http:\/\/www.useragentman.com\/blog\/?p=6688"},"modified":"2014-12-22T20:11:53","modified_gmt":"2014-12-23T00:11:53","slug":"fixing-cross-browser-issues-with-css3-viewport-units-in-ie9-and-safari-for-ios","status":"publish","type":"post","link":"https:\/\/www.useragentman.com\/blog\/2014\/09\/24\/fixing-cross-browser-issues-with-css3-viewport-units-in-ie9-and-safari-for-ios\/","title":{"rendered":"Fixing Cross-Browser Issues With CSS3 Viewport Units in IE9+ and Safari for iOS"},"content":{"rendered":"<div class=\"importantNotes\">\n<strong>Note:<\/strong> This blog post has been updated since the script has been simplified. Please see the <a href=\"https:\/\/github.com\/rodneyrehm\/viewport-units-buggyfill#user-content-changelog\" title=\"Changelog that this blog post update is based on.\" target=\"_blank\">Changelog notes on github<\/a> for more information.<\/code>\n<\/div>\n\r\n<div class=\"resizable alignleft\">\r\n<iframe  src=\"\/tests\/vw-vh.old\/examples\/stacey.html\">\r\n<\/iframe>\r\n<p><span class=\"resize-text\">Resize me or <\/span><a href=\"\/tests\/vw-vh.old\/examples\/stacey.html\">open demo in a new window<\/a><\/p>\r\n<\/div>\r\n<p><span class=\"desktop-only\"><strong>Resize the iframe on the left using the dragger next to the text.<\/strong> (or, better yet, see the demo on the left <a href=\"\/tests\/vw-vh\/examples\/stacey.html\">without the iframe<\/a> and resize your browser).<\/span> <span class=\"mobile-only\"><strong><a href=\"\/tests\/vw-vh\/examples\/stacey.html\">Open the demo on the left<\/a> in your mobile browser and rotate the screen.<\/strong><\/span> You will see that <code>font-size<\/code> of the word &#8220;STACEY&#8221; resizes according to the size of the containing circle.  The diameter of this circle is always 33% of the width or height, depending on which is bigger.  <strong>All these calculations are done in CSS using viewport units<\/strong>, which are very handy when coding responsive websites.  With them, you can describe <code>width<\/code>, <code>height<\/code>, <code>font-size<\/code> and other styles as <strong>percentages of the viewport width and height<\/strong>.<\/p>\n<p>This article will cover off <strong>what viewport units are and how to use them.<\/strong>  If you are already familiar with them, you will already know that there a few <strong>nasty gotchas<\/strong> when it comes to using viewport units, not the least of which are some <strong>commonly known bugs<\/strong> in iOS Safari and IE9 and 10.  <strong>These are easily fixed<\/strong>, however, with an excellent JavaScript fix (or &#8220;buggyfill&#8221;) by <a href=\"http:\/\/rodneyrehm.de\/en\/\">Rodney Rehm<\/a> (<strong>I have used these fixes in a production environment<\/strong> and they work like a charm and have a minimal effect on performance).  His original release fixed issues with Safari for iOS, but he also  graciously merged code that I added that plugs some holes in IE9 and allows developers to use viewport units inside of CSS3 <code>calc()<\/code> expressions in iOS Safari and IE9+.  If you want to use viewport units today, hopefully this article and &#8220;buggyfill&#8221; will help you avoid the issues that I had when I first started using them.<\/p>\n\r\n<div class=\"iphone-screenshots\">\r\n  <div class=\"images\">\r\n    <img loading=\"lazy\" decoding=\"async\" class=\"portrait\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2014\/07\/stacey-portrait-small.png\" alt=\"stacey-portrait-small\" width=\"184\" height=\"358\" class=\"alignnone size-full wp-image-6779\" srcset=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2014\/07\/stacey-portrait-small.png 184w, https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2014\/07\/stacey-portrait-small-154x300.png 154w\" sizes=\"auto, (max-width: 184px) 100vw, 184px\" \/>\r\n    <img loading=\"lazy\" decoding=\"async\" class=\"landscape\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2014\/07\/stacey-landscape-small.png\" alt=\"stacey-landscape-small\" width=\"358\" height=\"184\" class=\"alignnone size-full wp-image-6778\" srcset=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2014\/07\/stacey-landscape-small.png 358w, https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2014\/07\/stacey-landscape-small-300x154.png 300w\" sizes=\"auto, (max-width: 358px) 100vw, 358px\" \/>\r\n  <\/div>\r\n  <p><span class=\"top\">Here are screenshots of the full demo page on an iPhone.<\/span><span class=\"bottom\">Hover over it to see the layout in portrait mode.<\/span><\/p>\r\n<\/div>\r\n<\r\n<p><a class=\"exampleLink\" href=\"https:\/\/github.com\/rodneyrehm\/viewport-units-buggyfill\">Download the latest version of viewport-units-buggyfill from github.<\/a><\/p>\n<h2>What are Viewport Units<\/h2>\n<p>Unlike the <code>px<\/code> unit, <strong><em>viewport units describe how big an object is relative to the width and height the viewport<\/em><\/strong> (i.e. the visible part of the web page).  If you always want a block of text to be 90% the viewport height, you can use the following CSS to do this:<\/p>\n<blockquote class=\"code\">\n<pre>\r\n.myLargeText {\r\n    \/* 90% of the browser height = 90vh *\/\r\n    font-size: <span class=\"hilite\">90vh<\/code>;\r\n}\r\n<\/pre>\n<\/blockquote>\n\r\n<div class=\"resizable aligncenter vh-demo\">\r\n<iframe  src=\"\/tests\/vw-vh\/examples\/vh.html\">\r\n<\/iframe>\r\n<p><span class=\"resize-text\">Resize me or <\/span><a href=\"\/tests\/vw-vh\/examples\/vh.html\">open demo in a new window<\/a><\/p>\r\n<\/div>\r\n<p><code>1vh<\/code> is equal to 1% of the viewport height, so have the font-size of 90vh means the font is never taller than the height of the viewport.  If you want to have a block that is 80% of the viewport width, that can be done like this:<\/p>\n<blockquote class=\"code\">\n<pre>\r\n.myLargeBlock {\r\n    \/* 80% of the browser height = 80vw *\/\r\n    width: <span class=\"hilite\">80vw<\/span>;\r\n\r\n    \/* let's center this block *\/\r\n    margin: 0 auto;\r\n}\r\n<\/pre>\n<\/blockquote>\n\r\n<div class=\"resizable aligncenter vw-demo\">\r\n<iframe  src=\"\/tests\/vw-vh\/examples\/vw.html\">\r\n<\/iframe>\r\n<p><span class=\"resize-text\">Resize me or <\/span><a href=\"\/tests\/vw-vh\/examples\/vw.html\">open demo in a new window<\/a><\/p>\r\n<\/div>\r\n<p>There are also <code>vmin<\/code> and <code>vmax<\/code>. 1vmin is equal to 1vw or 1vh (whatever is smallest) &#8230;<\/p>\n<div class=\"resizable aligncenter vmax-demo\">\n<iframe  src=\"\/tests\/vw-vh\/examples\/vwax.html\"><br \/>\n<\/iframe><\/p>\n<p><span class=\"resize-text\">Resize me or <\/span><a href=\"\/tests\/vw-vh\/examples\/vwax.html\">open demo in a new window<\/a><\/p>\n<\/div>\n<p>&#8230; while <code>1vmax<\/code> 1vw or 1vh (whatever is largest).<\/p>\n\r\n<div class=\"resizable aligncenter vmin-demo\">\r\n<iframe  src=\"\/tests\/vw-vh\/examples\/vmin.html\">\r\n<\/iframe>\r\n<p><span class=\"resize-text\">Resize me or <\/span><a href=\"\/tests\/vw-vh\/examples\/vmin.html\">open demo in a new window<\/a><\/p>\r\n<\/div>\r\n<h2>Cool &#8230; So What Are The Gotchas You Were Talking About?<\/h2>\n<p>There are, of course, some issues with viewport units as they are implemented natively in browsers today, most of which are <a href=\"http:\/\/html5please.com\/#Viewport%20units%20(vh,%20vw,%20vmin,%20vmax)\">outlined on the html5please<\/a> website:<\/p>\n<ul>\n<li>Safari for iOS browsers <a href=\"http:\/\/blog.rodneyrehm.de\/archives\/34-iOS7-Mobile-Safari-And-Viewport-Units.html\">has a well-known bug<\/a> that affects calculating viewport units when a iPhone\/iPad is rotated.<\/li>\n<li>IE9 does not calculate viewport units correctly when changing media-query breakpoints.<\/li>\n<li>IE9 and 10 does not support <code>vmax<\/code><\/li>\n<li>IE9 does not support <code>vmin<\/code> (it does, hoever, support <code>vm<\/code> which is equivalent to <code>vmin<\/code>).<\/li>\n<li>IE9 and Safari for iOS calculates viewport units differently inside of a frame.  IE9 will assume the <code>100vw<\/code> and <code>100vh<\/code> to be the width and height of the parent document&#8217;s viewport, while Safari for iOS will choose 1px (!!!!) for both.<\/li>\n<li>Safari in iOS cannot do viewport units in a lot of the more complicated CSS properties (e.g. <code>text-shadow<\/code>).<\/li>\n<\/ul>\n<p><strong>All of these issues, however, are handled using viewport-units-buggyfill.<\/strong>.  It was created by Rodney Rehm to fix iOS Safari&#8217;s well known bugs with viewport units, and I added some code to it to handle additional issues in iOS as well as IE9+.  Just download the code from github and insert this into the bottom of your web page &mdash; you&#8217;ll then be able use viewport units in your code in all modern browsers, including iOS Safari and IE9+:<\/p>\n<blockquote class=\"code\">\n<pre>\r\n&lt;!-- \r\n      This is the base buggyfill. \r\n--&gt;\r\n&lt;script src=\"path\/to\/viewport-units-buggyfill.js\"&gt;&lt;\/script&gt;\r\n\r\n&lt;!--\r\n      This is the hacks plugin needed for contentHacks to work correctly \r\n      (see below).\r\n--&gt;\r\n&lt;script src=\"path\/to\/viewport-units-buggyfill.hacks.js\"&gt;&lt;\/script&gt;\r\n&lt;script&gt;window.viewportUnitsBuggyfill.init({\r\n\r\n    \/\/ milliseconds to delay between updates of viewport-units\r\n    \/\/ caused by orientationchange, pageshow, resize events\r\n    refreshDebounceWait: 250,\r\n\r\n    \/\/ provide hacks plugin to make the contentHack property work correctly.\r\n    hacks: window.viewportUnitsBuggyfillHacks\r\n\r\n});&lt;\/script&gt;\r\n<\/pre>\n<\/blockquote>\n<p>The paramater object for <code>.init()<\/code> is optional.  It can have the following properties:<\/p>\n<ol>\n<li>If the <code>refreshDebounceWait<\/code> property is set to a number, then IE9+ will use a debounce routine to throttle how many times the buggyfill is exeucuted on a browser resize.<\/li>\n<li>If <code>hacks<\/code> is set to <code>window.viewportUnitsBuggyfillHacks<\/code>, then we can use it to use <code>vmin<\/code> and <code>vmax<\/code> units in IE9+ using &#8220;content hacks&#8221;. (Note that in order for &#8220;content hacks&#8221; to work properly, the <code>hacks<\/code> property has to be set to <code>window.viewportUnitsBuggyfillHacks<\/code>).  Content hacks are coded like this:<br \/>\n<blockquote class=\"code\">\n<pre>\r\n.myLargeBlock {\r\n    \r\n  \/* Non-IE browsers *\/\r\n  <span class=\"hilite\">width: 50vmin<\/span>;\r\n  <span class=\"hilite2\">font-size: 80vmax<\/span>;\r\n\r\n  \/* IE9 and 10 *\/\r\n  content: 'viewport-units-buggyfill; <span class=\"hilite\">width: 50vmin<\/span>; <span class=\"hilite2\">font-size: 80vmax<\/span>;';\r\n\r\n}\r\n<\/pre>\n<\/blockquote>\n<\/li>\n<li>\nNote that Safari for older iOS (6.0 specifically) does not support the <code>vmax<\/code> keywords and it&#8217;s JavaScript engine ignores it.  As of September 2014, <a href=\"http:\/\/david-smith.org\/iosversionstats\/\">David Smith&#8217;s iOS Version Stats Page<\/a> states this only makes up 8.3% of all iOS devices in the wild, so I don&#8217;t think it&#8217;s not a huge deal.  However, if this <em>is<\/em> of concern to you, you can use a &#8220;content hack&#8221; to fix this as well:<\/p>\n<blockquote class=\"code\">\n<pre>\r\n.myLargeBlock {\r\n    \r\n  \/* Modern browsers *\/\r\n  font-size: 80vmax;\r\n\r\n  \/* Safari for iOS &lt; 8 and IE &lt;= 10 *\/\r\n  <span class=\"hilite\">content: 'viewport-units-buggyfill; font-size: 80vmax';<\/span>\r\n\r\n}\r\n<\/pre>\n<\/blockquote>\n<p><strong>Note that I implemented this hack by using the <code>content<\/code> property since it is not used in CSS selectors that don&#8217;t use <code>::before<\/code> or <code>::after<\/code> pseudo-elements.<\/strong>  This means, of course, that you cannot use virtual units in <code>::before<\/code> and <code>::after<\/code> rules for Safari for iOS &lt;= 6.  If you have to support this browser, it is better than nothing, but hopefully I can come up with a better way of doing this to prevent this restriction (if you have an idea, please make a comment below).\n<\/li>\n<\/ol>\n<p><a class=\"exampleLink\" href=\"https:\/\/github.com\/rodneyrehm\/viewport-units-buggyfill\">Download the latest version of viewport-units-buggyfill from github.<\/a><\/p>\n<h2>Using Viewport Units inside of <code>calc()<\/code> Expressions<\/h2>\n<p><strong>Using viewport units inside of CSS3 <code>calc()<\/code> statements<\/strong> can be very handy!  Let&#8217;s say, for example, you want to center a DOM element smack in the middle of the viewport.  The CSS recipe is rather simple:<\/p>\n<blockquote class=\"code\">\n<pre>\r\n.circle {\r\n\r\n  \/* Let's make this a 200 x 200 circle *\/\r\n  width: 200px;\r\n  height: 200px;\r\n  border-radius: 50%;\r\n  background: red;\r\n  position: absolute;\r\n\r\n  \/* \r\n   * We set the top property to be half of the \r\n   * viewport height minus half of the height \r\n   * of the element height to center it vertically.\r\n   *   \r\n   * Similarly set the left property to be \r\n   * half of the viewport width minus half \r\n   * the element width to center it horizontally\r\n   *\/\r\n  <span class=\"hilite\">top: calc(50vh -  100px );<\/span>\r\n  <span class=\"hilite\">left: calc(50vw -  100px );<\/span>\r\n  \r\n}\r\n<\/pre>\n<\/blockquote>\n\r\n<div class=\"resizable aligncenter vmin-demo\">\r\n<iframe  src=\"\/tests\/vw-vh\/examples\/vunit-calc.html\">\r\n<\/iframe>\r\n<p><span class=\"resize-text\">Resize me or <\/span><a href=\"\/tests\/vw-vh\/examples\/vunit-calc.html\">open demo in a new window<\/a><\/p>\r\n<\/div>\r\n<p>Perfect and simple!  However, Safari for iOS and IE9-10 also doesn&#8217;t allow viewport units inside the CSS3 <code>calc()<\/code> expressions (it ignores these expressions).  In order to fix this, I implemented the following hack so that viewport-units-buggyfill would do it instead: <\/p>\n<blockquote class=\"code\">\n<pre>\r\n.circle {\r\n  \/* Let's make this a 200 x 200 circle *\/\r\n  width: 200px;\r\n  height: 200px;\r\n  border-radius: 50%;\r\n  background: red;\r\n  position: absolute;\r\n  \/* \r\n   * We set the top property to be half of the \r\n   * viewport height minus half of the height \r\n   * of the element height to center it vertically.\r\n   *   \r\n   * Similarly set the left property to be \r\n   * half of the viewport width minus half \r\n   * the element width to center it horizontally\r\n   *\/\r\n  top: calc(50vh -  100px );\r\n  left: calc(50vw -  100px );\r\n  \/*\r\n   * Here is the code for WebKit browsers that will allow \r\n   * viewport-units-buggyfill.js to perform calc on viewport\r\n   * units.\r\n   *\/\r\n  <span class=\"hilite2\">content: 'viewport-units-buggyfill; top: calc(50vh -  100px ); left: calc(50vw -  100px );';<\/span>\r\n}\r\n<\/pre>\n<\/blockquote>\n\r\n<div class=\"importantNotes\">\r\n<strong>Note:<\/strong> you must <code>.init()<\/code> the buggyfill with the <code>hacks<\/code> property set to <code>window.viewportUnitsBuggyfillHacks<\/code> (as described above) in order for this to work.\r\n<\/div>\r\n<h2>How about support for legacy IE properties?<\/h2>\n<p>While adding features to this library, I did some tests with some of the fancier CSS3 properties, such as <code>text-shadow<\/code>.  They, of course, didn&#8217;t show up in IE9, since it doesn&#8217;t support CSS text-shadows.  To fix this, I applied <a href=\"https:\/\/www.useragentman.com\/blog\/2011\/04\/14\/css3-text-shadow-can-it-be-done-in-ie-without-javascript\/\">the <code>DropShadow<\/code> Visual Filter trick I wrote about in a previous blog post<\/a> to my test page.  It looked fine, except it didn&#8217;t have the responsive sizing for the shadows like in more modern browsers, so I decided to add Visual Filter support for viewport units.  Take a look at the demo below in both IE9 and a modern browser and you&#8217;ll see that text-shadows grow with the height of the viewport:<\/p>\n\r\n<div class=\"resizable aligncenter vmin-demo\">\r\n<iframe  id=\"rob-ford\" src=\"\/tests\/vw-vh\/examples\/rob-ford.html\">\r\n<\/iframe>\r\n<p><span class=\"resize-text\">Resize me or <\/span><a href=\"\/tests\/vw-vh\/examples\/rob-ford.html\">open demo in a new window<\/a><\/p>\r\n<\/div>\r\n<p>As you can see from the CSS, viewport units now work in IE&#8217;s <code>DropShadow<\/code> Visual filter:<\/p>\n<blockquote class=\"code\">\n<pre>\r\n.copy {\r\n\r\n  font-family: \"AmericanCaptain\", \"Impact\", sans-serif;\r\n  text-align: center;\r\n  color: white;\r\n  \/*\r\n   * The first part of this text-shadow (1vh 1vh 0 #000)\r\n   * is the huge drop shadow on the bottom right of the\r\n   * text.  The other 1px shadows create the outline \r\n   * around the text.\r\n   *\/\r\n  text-shadow: 1vh 1vh 0 #000, \r\n               1px 0 0 #000, \r\n               -1px 0 0 #000, \r\n               0 -1px 0 #000, \r\n               0 1px 0 #000;\r\n\r\n}\r\n\r\nbody.ie9down .copy {\r\n\r\n  zoom: 1;\r\n  background: #000001;\r\n  \/*\r\n   * This CSS is the IE9- equivalent of the text-shadow code above.  \r\n   * For more details, see my article \"<a href=\"https:\/\/www.useragentman.com\/blog\/2011\/04\/14\/css3-text-shadow-can-it-be-done-in-ie-without-javascript\/\">CSS3 Text-Shadow \u2013 Can It Be<\/a> \r\n   * <a href=\"https:\/\/www.useragentman.com\/blog\/2011\/04\/14\/css3-text-shadow-can-it-be-done-in-ie-without-javascript\/\">Done in IE Without JavaScript?<\/a>\" \r\n   *\r\n   *\/\r\n  filter: progid:DXImageTransform.Microsoft.Chroma(color=#000001)\r\n          progid:DXImageTransform.Microsoft.DropShadow(OffX=1, OffY=1, Color=#000000) \r\n          progid:DXImageTransform.Microsoft.DropShadow(OffX=-1, OffY=-1, Color=#000000) \r\n          progid:DXImageTransform.Microsoft.DropShadow(<span class=\"hilite\">OffX=1vh, OffY=1vh,<\/span> Color=#000000);\r\n\r\n}\r\n<\/pre>\n<\/blockquote>\n\r\n<div class=\"importantNotes\">\r\n<strong>Note:<\/strong> you must <code>.init()<\/code> the <code>hacks<\/code> property set to <code>window.viewportUnitsBuggyfillHacks<\/code> in order for this to work.  Remember to include the <code>viewport-units-buggyfill.hacks.js<\/code> script to ensure this works correctly!\r\n<\/div>\r\n<p><a class=\"exampleLink\" href=\"https:\/\/github.com\/rodneyrehm\/viewport-units-buggyfill\">Download the latest version of viewport-units-buggyfill from github.<\/a><\/p>\n<h2>Acknowledgements<\/h2>\n<ul>\n<li>The iframe resizing routines on this web page were lifted from <a href=\"\">jQuery UI Resizable<\/a> (note, however, that neither jQuery nor jQuery UI are needed for this buggyfill to work).<\/li>\n<li>As mentioned before, the buggyfill was originally written by <a href=\"http:\/\/rodneyrehm.de\/en\/\">Rodney Rehm<\/a>.  I just added some extra fixes to it<\/li>\n<li>Thanks to talented <a href=\"http:\/\/www.staceymusic.com\">STACEY<\/a> for the kind use of her photo and logo for the demo at the top of this page.  In return, I promise to work on making her site responsive using this technique. :-)<\/li>\n<li>In the Rob\/Doug Ford example, I used the freeware version of <a href=\"http:\/\/thefontry.com\/americancaptain\">American Captain<\/a> by <a href=\"http:\/\/thefontry.com\/\">The Fontry&#8217;s<\/a> Michael G. Adkins.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p><img decoding=\"async\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2014\/09\/stacey.jpg\" \/> With <strong>viewport units<\/strong>, you can describe width, height, font-size and other CSS styles as <strong>percentages of the viewport width and height<\/strong>.  There are, however, <strong>a few nasty gotchas<\/strong> when it comes to using them in iOS Safari and IE9 and 10. They also <strong>don&#8217;t always play nice in CSS3 <code>calc()<\/code> statements<\/strong> and don&#8217;t work at all  in <strong>IE Visual Filters.<\/strong>  Using them in <strong><code>iframes<\/code> can also be problematic<\/strong>.  This post talks about how to <strong>work around these issues easily<\/strong> using a JavaScript buggyfill (not polyfill).  I have used viewport units in production sites today, and now you can too, on any phone or device used in the wild today.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9,38,120,95,160],"tags":[163,166,218,167,221,168,165,53,44,103,101,159,169,164,162,161,154,156,225,52,158,157,155],"class_list":["post-6688","post","type-post","status-publish","format-standard","hentry","category-css","category-css3","category-ie-visual-filters","category-math","category-viewport-units","tag-buggyfill","tag-calc","tag-css","tag-css-calc","tag-css3","tag-css3-calc","tag-cssom","tag-ie","tag-ie-filters","tag-ie9","tag-internet-explorer","tag-ios","tag-iphone","tag-javascript-2","tag-polyfill","tag-rodney-rehm","tag-vh","tag-viewport","tag-viewport-units","tag-visual-filters","tag-vmax","tag-vmin","tag-vw"],"_links":{"self":[{"href":"https:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/posts\/6688","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/comments?post=6688"}],"version-history":[{"count":139,"href":"https:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/posts\/6688\/revisions"}],"predecessor-version":[{"id":6841,"href":"https:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/posts\/6688\/revisions\/6841"}],"wp:attachment":[{"href":"https:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/media?parent=6688"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/categories?post=6688"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/tags?post=6688"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}