{"id":212,"date":"2012-10-20T10:23:48","date_gmt":"2012-10-20T07:23:48","guid":{"rendered":"http:\/\/ulviercan.com\/teknoblog\/?p=212"},"modified":"2015-01-05T19:04:43","modified_gmt":"2015-01-05T16:04:43","slug":"jquery-ve-css","status":"publish","type":"post","link":"https:\/\/www.ulviercan.com\/teknoblog\/jquery\/jquery-ve-css\/","title":{"rendered":"jQuery ve CSS"},"content":{"rendered":"

\"\"
\njQuery konusunda kendimi uzman olarak nitelendirebilirim. Ancak, g\u00fcn ge\u00e7tik\u00e7e \u015funu g\u00f6r\u00fcyorum ki, her yeni haz\u0131rlad\u0131\u011f\u0131m makalede ben de yepyeni \u015feyler \u00f6\u011freniyorum. Bu ba\u011flamda bilgiyi payla\u015fman\u0131n hazz\u0131n\u0131 ve geri d\u00f6n\u00fc\u015f\u00fcn\u00fc ya\u015f\u0131yorum.<\/p>\n

Yepyeni, dinamik i\u00e7eri\u011fimle bu hafta da kar\u015f\u0131n\u0131zday\u0131m. Bug\u00fcnk\u00fc konuyu CSS, konumland\u0131rma, y\u00fckseklik ve geni\u015flik olarak 3 ba\u015fl\u0131k alt\u0131nda ele al\u0131rken, genel hatlar\u0131yla temel jQuery CSS i\u015flemlerinden bahsediyor olaca\u011f\u0131m. Her zamanki gibi uygulamal\u0131 \u00f6rneklerle konular\u0131 daha anla\u015f\u0131l\u0131r hale getirmek \u00f6ncelikli g\u00f6revim olacak.<\/p>\n

G\u00fczel bir giri\u015f yaz\u0131s\u0131ndan sonra laf\u0131 daha fazla uzatmadan konumuza giri\u015f yapal\u0131m. \ud83d\ude42<\/p>\n

<\/div>\n
<\/div>\n

CSS<\/h1>\n

css( name )<\/h3>\n

Se\u00e7ilen ilk elementin stil (style) parametresine ait de\u011feri d\u00f6nd\u00fcr\u00fcr.<\/p>\n

\u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/xXnwz\/<\/a><\/p>\n

\r\n<!DOCTYPE HTML PUBLIC "-\/\/W3C\/\/DTD HTML 4.01 Transitional\/\/EN"\r\n                    "https:\/\/www.w3.org\/TR\/html4\/loose.dtd">\r\n<html>\r\n<head>\r\n  <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n\r\n  <script>\r\n  $(document).ready(function(){\r\n\r\n    $("div").click(function () {\r\n      var color = $(this).css("background-color");\r\n      $("#sonuc").html("Bu kutu <span style='color:" +\r\n                         color + ";'>" + color + "<\/span>.");\r\n    });\r\n\r\n  });\r\n  <\/script>\r\n  <style>\r\n  div { width:60px; height:60px; margin:5px; float:left; }\r\n  <\/style>\r\n<\/head>\r\n<body>\r\n  <span id="sonuc"> <\/span>\r\n  <div style="background-color:red;"><\/div>\r\n  <div style="background-color:rgb(12,17,30);"><\/div>\r\n  <div style="background-color:#555321;"><\/div>\r\n  <div style="background-color:#a12;"><\/div>\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n
Bu kod par\u00e7as\u0131nda, “var color = $(this).css(“background-color”);” ile arka plan rengini al\u0131yoruz ve t\u0131klamaya olay\u0131nda, t\u0131klanan kutunun rengini span elementine yazd\u0131r\u0131yoruz.<\/p>\n
css( properties )<\/h3>\n
E\u015fle\u015fen t\u00fcm elementler i\u00e7in, belirtilen stil \u00f6zelliklerinin de\u011ferlerini nesne olarak ayarlar.
\n\u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/NVG2s\/<\/a><\/p>\n
\r\n<!DOCTYPE HTML PUBLIC "-\/\/W3C\/\/DTD HTML 4.01 Transitional\/\/EN"\r\n                    "https:\/\/www.w3.org\/TR\/html4\/loose.dtd">\r\n<html>\r\n<head>\r\n  <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n\r\n  <script>\r\n  $(document).ready(function(){\r\n\r\n    $("p").hover(function () {\r\n      $(this).css({'background-color' : 'red', 'font-weight' : 'bolder'});\r\n    }, function () {\r\n      var cssObj = {\r\n        'background-color' : '#CCC',\r\n        'font-weight' : '',\r\n        'color' : 'rgb(0,40,244)'\r\n      }\r\n      $(this).css(cssObj);\r\n    });\r\n\r\n  });\r\n  <\/script>\r\n  <style>\r\n  p { blue; }\r\n  <\/style>\r\n<\/head>\r\n<body>\r\n  <p>\r\n    Fareniz ile paragraf\u0131n \u00fcst\u00fcne geliniz\r\n  <\/p>\r\n  <p>\r\n    Fareniz ile paragraf\u0131n \u00fcst\u00fcne geliniz\r\n  <\/p>\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n
Bu kodda ise, CSS \u00f6zelliklerimizi bir nesneye d\u00f6n\u00fc\u015ft\u00fcr\u00fcp i\u015flemlerimizi yap\u0131yoruz.<\/p>\n
css( name, value )<\/h3>\n
Se\u00e7ilen elementler i\u00e7in, tek bir stil parametresi ayarlar.
\n\u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/WPPNC\/<\/a><\/p>\n
\r\n<!DOCTYPE HTML PUBLIC "-\/\/W3C\/\/DTD HTML 4.01 Transitional\/\/EN"\r\n                    "https:\/\/www.w3.org\/TR\/html4\/loose.dtd">\r\n<html>\r\n<head>\r\n  <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n\r\n  <script>\r\n$(document).ready(function() {\r\n    $("div").click(function () {\r\n      $(this).css("background-color","blue");\r\n      $(this).css("margin","50px");\r\n      $(this).css("padding","10px");\r\n      $(this).css("font-family","tahoma");\r\n      $(this).html("Bu kutu art\u0131k mavidir.");\r\n    });\r\n});\r\n  <\/script>\r\n  <style>\r\n  div { width:80px; height:80px; background-color:red; color: white; }\r\n  <\/style>\r\n<\/head>\r\n<body>\r\n    <div>Bu kutu k\u0131rm\u0131z\u0131d\u0131r.<\/div>\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n
G\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi “css(‘CSS_ozelligi’,’degeri’)” sayesinde istedi\u011fimiz elementin istedi\u011fimiz tek CSS \u00f6zelli\u011fini rahatl\u0131kla de\u011fi\u015ftirebiliyoruz.<\/p>\n
jQuery ve CSS konusunda asl\u0131nda en \u00e7ok i\u015fimize yarayacak ba\u015fl\u0131\u011f\u0131 da ele alm\u0131\u015f olduk. G\u00f6rd\u00fc\u011f\u00fcn\u00fcz \u00fczere, .css() ile t\u00fcm CSS i\u015flemlerimizi rahatl\u0131kla yapabiliyoruz.<\/p>\n
Konumland\u0131rma<\/h1>\n
offset( )<\/h3>\n
Se\u00e7ilen ilk eleman\u0131n, belgeye g\u00f6receli olarak olan uzakl\u0131\u011f\u0131n\u0131 d\u00f6nd\u00fcr\u00fcr. Sadece g\u00f6r\u00fcnen elementlerde \u00e7al\u0131\u015f\u0131r.
\n\u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/8DN5C\/<\/a><\/p>\n
\r\n<!DOCTYPE HTML PUBLIC "-\/\/W3C\/\/DTD HTML 4.01 Transitional\/\/EN"\r\n                    "https:\/\/www.w3.org\/TR\/html4\/loose.dtd">\r\n<html>\r\n<head>\r\n  <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n\r\n  <script>\r\n  $(document).ready(function(){\r\n    var p = $("p:last");\r\nvar offset = p.offset();\r\np.html( "Sol: " + offset.left + ", \u00dcst: " + offset.top );\r\n  });\r\n  <\/script>\r\n  <style>\r\n  p { margin-left:10px; }\r\n  <\/style>\r\n<\/head>\r\n<body>\r\n  <p>Merhaba<\/p><p>ikinci paragraf<\/p>\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n
“var offset = p.offset();” ile offset nesnemizi olu\u015fturduktan sonra offset.left ve offset.top ile p elementinin sol ve \u00fcste olan uzakl\u0131\u011f\u0131n\u0131 bulmu\u015f olduk.<\/p>\n
offsetParent( )<\/h3>\n
Se\u00e7ilen elemente en yak\u0131n olan ata elementi se\u00e7memizi sa\u011flar.
\n\u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/uzuTs\/<\/a><\/p>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n\r\n    <ul class="seviye-1">\r\n      <li class="item-i">I<\/li>\r\n      <li class="item-ii" style="position: relative;">II\r\n        <ul class="seviye-2">\r\n          <li class="item-a">A<\/li>\r\n          <li class="item-b">B\r\n            <ul class="seviye-3">\r\n              <li class="item-1">1<\/li>\r\n              <li class="item-2">2<\/li>\r\n              <li class="item-3">3<\/li>\r\n            <\/ul>\r\n          <\/li>\r\n          <li class="item-c">C<\/li>\r\n        <\/ul>\r\n      <\/li>\r\n      <li class="item-iii">III<\/li>\r\n    <\/ul>\r\n\r\n    <script>$('li.item-a').offsetParent().css('background-color', 'red');<\/script> <!-- Bu sat\u0131r listedeki 2. itemin rengini de\u011fi\u015ftirecektir. -->\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n
“$(‘li.item-a’).offsetParent().css(‘background-color’, ‘red’)” Bu sat\u0131r listedeki 2. itemin rengini de\u011fi\u015ftirecektir.<\/p>\n
position( )<\/h3>\n
Se\u00e7ilen elementin, bir \u00fcst seviyedeki elemente olan uzakl\u0131klar\u0131n\u0131 d\u00f6nd\u00fcr\u00fcr.
\n\u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/ZFc8x\/<\/a><\/p>\n
\r\n<!DOCTYPE HTML PUBLIC "-\/\/W3C\/\/DTD HTML 4.01 Transitional\/\/EN"\r\n                    "https:\/\/www.w3.org\/TR\/html4\/loose.dtd">\r\n<html>\r\n<head>\r\n  <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n\r\n  <script>\r\n  $(document).ready(function(){\r\n    var p = $("p:first");\r\nvar position = p.position();\r\n$("p:last").text( "Sol: " + position.left + ", \u00dcst: " + position.top );\r\n  });\r\n  <\/script>\r\n  <style>\r\n  div { padding: 15px;}\r\n  p { margin-left:10px; }\r\n  <\/style>\r\n<\/head>\r\n<body>\r\n  <div><p>Selam<\/p><\/div><p><\/p>\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n
“var position = p.position();” ile position nesnemizi olu\u015fturduktan sonra, position.left ve position.top ile \u00fcstteki elementin offset de\u011ferine g\u00f6receli olarak uzakl\u0131klar\u0131 al\u0131yoruz.<\/p>\n
scrollTop( ), scrollTop( val )<\/h3>\n
Bu fonksiyona parametre ge\u00e7irilmedi\u011fi zaman, se\u00e7ilen elementin \u00fcst k\u0131sma olan kayd\u0131rma \u00e7ubu\u011fu (scroll) uzakl\u0131\u011f\u0131n\u0131 d\u00f6nd\u00fcr\u00fcr.
\nParametre g\u00f6nderdi\u011fimizde ise, kayd\u0131rma \u00e7ubu\u011funu belirlenen de\u011fere g\u00f6re kayd\u0131r\u0131r.<\/p>\n
Not: Bu fonksiyonlara ek olarak scrollLeft( ), scrollLeft( val ) fonksiyonlar\u0131 vard\u0131r. Kullan\u0131mlar\u0131 tamamen ayn\u0131d\u0131r.<\/p>\n
\u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/GLVZx\/<\/a><\/p>\n
\r\n<!DOCTYPE HTML PUBLIC "-\/\/W3C\/\/DTD HTML 4.01 Transitional\/\/EN"\r\n                    "https:\/\/www.w3.org\/TR\/html4\/loose.dtd">\r\n<html>\r\n<head>\r\n  <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n\r\n  <script>\r\n  $(document).ready(function(){\r\n    $("div.deneme").scrollTop(50);\r\n\r\n  });\r\n  <\/script>\r\n  <style>\r\ndiv.deneme{\r\nbackground:#CCCCCC none repeat scroll 0 0;\r\nborder:3px solid #666666;\r\nmargin:5px;\r\npadding:5px;\r\nposition:relative;\r\nwidth:500px;\r\nheight:300px;\r\noverflow:auto;\r\n}\r\n  p { margin:10px;padding:5px;border:2px solid #666;width:1000px;height:1000px; }\r\n  <\/style>\r\n<\/head>\r\n<body>\r\n  <div class="deneme"><h1>Selam<\/h1><p>ikinci sat\u0131r<\/p><\/div>\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n
Uygulamay\u0131 \u00e7al\u0131\u015ft\u0131rd\u0131\u011f\u0131m\u0131zda kayd\u0131rma \u00e7ubu\u011funun pozisyonuna dikkat ediniz. Ekranda g\u00f6rm\u00fc\u015f oldu\u011funuz de\u011fer, kayd\u0131rma \u00e7ubu\u011funun \u00fcstten ka\u00e7 piksel kayd\u0131r\u0131ld\u0131\u011f\u0131n\u0131 g\u00f6steriyor.<\/p>\n
Y\u00fckseklik ve Geni\u015flik<\/h1>\n
height( ), height( val ) | width( ), width( val )<\/h3>\n
height( ) se\u00e7ilen elementin hesaplanan y\u00fckseli\u011fini d\u00f6nd\u00fcr\u00fcr.
\nheight( val ) elementin y\u00fcksekli\u011fini ayarlar.
\nwidth( ) se\u00e7ilen elementin hesaplanan geni\u015fli\u011fini d\u00f6nd\u00fcr\u00fcr.
\nwidth( val ) elementin geni\u015fli\u011fini ayarlar.
\n\u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/PmWFD\/<\/a><\/p>\n
\r\n<!DOCTYPE HTML PUBLIC "-\/\/W3C\/\/DTD HTML 4.01 Transitional\/\/EN"\r\n                    "https:\/\/www.w3.org\/TR\/html4\/loose.dtd">\r\n<html>\r\n<head>\r\n  <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n\r\n  <script>\r\n  $(document).ready(function(){\r\n\r\n    $("div").one('click', function () {\r\n      $(this).height(30)\r\n             .css({cursor:"auto", backgroundColor:"green"});\r\n      $(this).width(30);\r\n      $("span").html("Y\u00fckseklik: "+$("div").height()+" Geni\u015flik: "+$("div").width());\r\n    });\r\n\r\n  });\r\n  <\/script>\r\n  <style>\r\n  div { width:50px; height:70px; float:left; margin:5px;\r\n        background:rgb(255,140,0); cursor:pointer; }\r\n  <\/style>\r\n<\/head>\r\n<body>\r\n  <div><\/div>\r\n  <span><\/span>\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n
Uygulamay\u0131 \u00e7al\u0131\u015ft\u0131rd\u0131ktan sonra kutuya t\u0131klay\u0131n\u0131z. Kodumuzda da g\u00f6rebilece\u011finiz \u00fczere yap\u0131lan i\u015f, basit bir y\u00fckseklik ve geni\u015flik ayarlamak.<\/p>\n
innerHeight( ), innerWidth( )<\/h3>\n
innerHeight se\u00e7ilen elementin kenarl\u0131klar hari\u00e7, padding de\u011feri dahil y\u00fcksekli\u011fini d\u00f6nd\u00fcr\u00fcr.
\ninnerWidth se\u00e7ilen elementin kenarl\u0131klar hari\u00e7, padding de\u011feri dahil geni\u015fli\u011fini d\u00f6nd\u00fcr\u00fcr.
\n\u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/yAwwk\/<\/a><\/p>\n
\r\n<!DOCTYPE HTML PUBLIC "-\/\/W3C\/\/DTD HTML 4.01 Transitional\/\/EN"\r\n                    "https:\/\/www.w3.org\/TR\/html4\/loose.dtd">\r\n<html>\r\n<head>\r\n  <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n\r\n  <script>\r\n  $(document).ready(function(){\r\n    var p = $("p:first");\r\n$("p:last").text( "innerHeight:" + p.innerHeight() + " | " + "innerWidth:" + p.innerWidth());\r\n\r\n  });\r\n  <\/script>\r\n  <style>\r\n  p { margin:10px; height: 50px; width: 250px; padding:5px;border:2px solid #666; }\r\n  <\/style>\r\n<\/head>\r\n<body>\r\n  <p>Merhaba<\/p><p><\/p>\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n
Ele ald\u0131\u011f\u0131m\u0131z bu iki metodun \u00e7ok faydal\u0131 oldu\u011funu d\u00fc\u015f\u00fcn\u00fcyorum. G\u00f6rd\u00fc\u011f\u00fcn\u00fcz \u00fczere \u00e7\u0131kt\u0131, sadece element y\u00fckseklik + padding ve element geni\u015flik + padding de\u011feri oldu.<\/p>\n
outerHeight( margin ), outerWidth( margin )<\/h3>\n
innerHeight se\u00e7ilen elementin kenarl\u0131klar ve padding de\u011feri dahil y\u00fcksekli\u011fini d\u00f6nd\u00fcr\u00fcr.
\ninnerWidth se\u00e7ilen elementin kenarl\u0131klar ve padding de\u011feri dahil geni\u015fli\u011fini d\u00f6nd\u00fcr\u00fcr.
\nMargin ikilik de\u011feri parametre olarak ge\u00e7irildi\u011fi zaman, elementin CSS margin de\u011feri de hesaplamaya dahil edilir.
\nY\u00fckseklik i\u00e7in \u00f6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/9KRf7\/<\/a><\/p>\n
\r\n<!DOCTYPE HTML PUBLIC "-\/\/W3C\/\/DTD HTML 4.01 Transitional\/\/EN"\r\n                    "https:\/\/www.w3.org\/TR\/html4\/loose.dtd">\r\n<html>\r\n<head>\r\n  <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n\r\n  <script>\r\n  $(document).ready(function(){\r\n    var p = $("p:first");\r\n$("p:last").text( "outerHeight:" + p.outerHeight() + " , outerHeight(true):" + p.outerHeight(true) );\r\n\r\n  });\r\n  <\/script>\r\n  <style>\r\n  p { margin:10px; height: 50px;padding:5px;border:2px solid #666; }\r\n  <\/style>\r\n<\/head>\r\n<body>\r\n  <p>Selam<\/p><p><\/p>\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n
“true” ikilik parametresini kulland\u0131\u011f\u0131m\u0131z zaman, y\u00fcksekli\u011fin margin de\u011ferleri dahil edilerek hesapland\u0131\u011f\u0131na dikkat ediniz.<\/p>\n
Geni\u015flik i\u00e7in \u00f6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/bJnYA\/<\/a><\/p>\n
\r\n<!DOCTYPE HTML PUBLIC "-\/\/W3C\/\/DTD HTML 4.01 Transitional\/\/EN"\r\n                    "https:\/\/www.w3.org\/TR\/html4\/loose.dtd">\r\n<html>\r\n<head>\r\n  <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n\r\n  <script>\r\n  $(document).ready(function(){\r\n    var p = $("p:first");\r\n$("p:last").text( "outerWidth:" + p.outerWidth()+ " , outerWidth(true):" + p.outerWidth(true) );\r\n\r\n  });\r\n  <\/script>\r\n  <style>\r\n  p { margin:10px;width:250px;padding:5px;border:2px solid #666; }\r\n  <\/style>\r\n<\/head>\r\n<body>\r\n  <p>Selam<\/p><p><\/p>\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n
“true” ikilik parametresini kulland\u0131\u011f\u0131m\u0131z zaman, geni\u015fli\u011fin margin de\u011ferleri dahil edilerek hesapland\u0131\u011f\u0131na dikkat ediniz.<\/p>\n
Faydalan\u0131lan kaynaklar:
\n1-) JQuery documentation -> CSS | https:\/\/docs.jquery.com\/CSS<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
jQuery konusunda kendimi uzman olarak nitelendirebilirim. Ancak, g\u00fcn ge\u00e7tik\u00e7e \u015funu g\u00f6r\u00fcyorum ki, her yeni haz\u0131rlad\u0131\u011f\u0131m makalede ben de yepyeni \u015feyler \u00f6\u011freniyorum. Bu ba\u011flamda bilgiyi payla\u015fman\u0131n hazz\u0131n\u0131 ve geri d\u00f6n\u00fc\u015f\u00fcn\u00fc ya\u015f\u0131yorum. Yepyeni, dinamik i\u00e7eri\u011fimle bu hafta da kar\u015f\u0131n\u0131zday\u0131m. Bug\u00fcnk\u00fc konuyu CSS, konumland\u0131rma, y\u00fckseklik ve geni\u015flik olarak 3 ba\u015fl\u0131k alt\u0131nda ele al\u0131rken, […]<\/p>\n","protected":false},"author":3,"featured_media":226,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[24,41,21,25],"class_list":["post-212","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","tag-css","tag-javascript","tag-jquery-2","tag-jquery-css"],"_links":{"self":[{"href":"https:\/\/www.ulviercan.com\/teknoblog\/wp-json\/wp\/v2\/posts\/212","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ulviercan.com\/teknoblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ulviercan.com\/teknoblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ulviercan.com\/teknoblog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ulviercan.com\/teknoblog\/wp-json\/wp\/v2\/comments?post=212"}],"version-history":[{"count":43,"href":"https:\/\/www.ulviercan.com\/teknoblog\/wp-json\/wp\/v2\/posts\/212\/revisions"}],"predecessor-version":[{"id":698,"href":"https:\/\/www.ulviercan.com\/teknoblog\/wp-json\/wp\/v2\/posts\/212\/revisions\/698"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.ulviercan.com\/teknoblog\/wp-json\/wp\/v2\/media\/226"}],"wp:attachment":[{"href":"https:\/\/www.ulviercan.com\/teknoblog\/wp-json\/wp\/v2\/media?parent=212"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ulviercan.com\/teknoblog\/wp-json\/wp\/v2\/categories?post=212"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ulviercan.com\/teknoblog\/wp-json\/wp\/v2\/tags?post=212"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}