Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix link for fixed positioning in mobile browsers #161

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion translations/ar.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ position.fixed.title: "fixed"
position.fixed.1: "نعني بذلك أن العنصر سيكون ثابتًا؛ بمعنى أنه سيتم تحديده بالنسبة لعرض الشاشة، وهذا سيجعل العنصر ثابتًا في نفس المكان مهما قمت بتحريك الفارة. يمكن تحقيق ذلك باستخدام الخصائص التالية: <code>relative</code>، و<code>top</code>، و<code>right</code>، و<code>bottom</code>، و<code>left</code>."
position.fixed.2: " متأكد من أنك قد لاحظت أن العنصر الثابت في الزاوية اليمنى السفلى اليسرى من الصفحة. حسنًا، لم لا تلق نظرة عليه الآن؟. كود الcss التالي هو الذي جعل العنصر السابق في هذا المكان."
position.fixed.3: "العنصر الثابت لا يترك فراغًا في المكان الذي يتواجد به في الصفحة."
position.fixed.4: "متصفحات الأجهزة المحمولة لديها دعم ضعيف لموضوع العناصر الثابتة. <a href=\"http://bradfrostweb.com/blog/mobile/fixed-position/\">ألق نظرة على المشكلة هنا</a>."
position.fixed.4: "متصفحات الأجهزة المحمولة لديها دعم ضعيف لموضوع العناصر الثابتة. <a href=\"http://bradfrost.com/blog/mobile/fixed-position/\">ألق نظرة على المشكلة هنا</a>."
position.fixed.example: "مرحبًا!. أنا عنصر ثابت لا أتحرك."
position.absolute.title: "absolute"
position.absolute.1: "قيمة <code>absolute</code> هي أكثر قيمة صعبة الاستخدام. تُستخدم هذه القيمة تقريبًا مثل القيمة <code>fixed</code> باستثناء أمر واحد وهو .<em>أنه يتم تحديد القيمة بالنسبة إلى أقرب عنصر</em>، وذلك بدلًا من تحديدها بالنسبة لعرض الشاشة. استخدام هذه الخاصية مع أي عنصر دون وجود عنصر قريب؛ فإن الموقع سيعتبر أقرب عنصر هو جسم الصفحة (body)."
Expand Down
2 changes: 1 addition & 1 deletion translations/de.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ position.fixed.title: "fixed"
position.fixed.1: "Ein fixiertes Element wird relativ zum Viewport platziert. Das heißt, das Element bleibt an der selben Stelle, auch wenn die Seite gescrollt wird. Wie bei <code>relative</code> werden die Eigenschaften <code>top</code>, <code>right</code>, <code>bottom</code> und <code>left</code> benutzt"
position.fixed.2: "Sicher hast du das fixierte Element in der unteren rechten Ecke dieser Seite bemerkt. Hiermit erlaube ich dir, ihm deine Aufmerksamkeit zu schenken. Hier ist der CSS Code, der es da hingebracht hat:"
position.fixed.3: "Ein fixiertes Element hinterlässt keine Lücke, wo es normalerweise auf der Seite wäre."
position.fixed.4: "Mobile Browser unterstützen fixed erstaunlich schlecht. <a href=\"http://bradfrostweb.com/blog/mobile/fixed-position/\">Hier erfährst du mehr über diese Situation</a>."
position.fixed.4: "Mobile Browser unterstützen fixed erstaunlich schlecht. <a href=\"http://bradfrost.com/blog/mobile/fixed-position/\">Hier erfährst du mehr über diese Situation</a>."
position.fixed.example: "Hallo! Ignorier mich erst einmal."
position.absolute.title: "absolute"
position.absolute.1: "<code>absolute</code> ist der kniffeligste position-Wert. <code>absolute</code> verhält sich wie <code>fixed</code> aber relativ zum <em>nächten positionierten Ancestor</em> statt relativ zum Viewport. Hat ein absolut positioniertes Element keinen positionierten Ancestor, benutzt es den document body und bewegt sich auch mit der gescrollten Seite. Zur Erinnerung: Ein \"positioniertes\" Element ist eines das als Position irgendeinen Wert außer <code>static</code> hat."
Expand Down
2 changes: 1 addition & 1 deletion translations/en.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ position.fixed.title: "fixed"
position.fixed.1: "A fixed element is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. As with <code>relative</code>, the <code>top</code>, <code>right</code>, <code>bottom</code>, and <code>left</code> properties are used."
position.fixed.2: "I'm sure you've noticed that fixed element in the lower-right hand corner of the page. I'm giving you permission to pay attention to it now. Here is the CSS that puts it there:"
position.fixed.3: "A fixed element does not leave a gap in the page where it would normally have been located."
position.fixed.4: "Mobile browsers have surprisingly shaky support for fixed. <a href=\"http://bradfrostweb.com/blog/mobile/fixed-position/\">Learn more about the situation here</a>."
position.fixed.4: "Mobile browsers have surprisingly shaky support for fixed. <a href=\"http://bradfrost.com/blog/mobile/fixed-position/\">Learn more about the situation here</a>."
position.fixed.example: "Hello! Don't pay attention to me yet."
position.absolute.title: "absolute"
position.absolute.1: "<code>absolute</code> is the trickiest position value. <code>absolute</code> behaves like <code>fixed</code> except relative to <em>the nearest positioned ancestor</em> instead of relative to the viewport. If an absolutely-positioned element has no positioned ancestors, it uses the document body, and still moves along with page scrolling. Remember, a \"positioned\" element is one whose position is anything except <code>static</code>."
Expand Down
2 changes: 1 addition & 1 deletion translations/es.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ position.fixed.title: "fixed"
position.fixed.1: "Un elemento fixed (fijo) se posiciona a la ventana del navegador de manera relativa, lo que significa que se mantendrá en el mismo lugar incluso después de hacer scroll en la página. Al igual que con <code>relative</code>, las propiedades <code>top</code>, <code>right</code>, <code>bottom</code>, y <code>left</code> también son usadas."
position.fixed.2: "Estoy seguro que ya notaste el elemento fijo en la parte de abajo a la derecha de la página. Te doy permiso de que lo veas ahora. Aquí está el CSS que lo posiciona donde está:"
position.fixed.3: "Un elemento con valor fixed no deja espacio en el lugar de la página donde estaba ubicado normalmente."
position.fixed.4: "Los buscadores móviles, sorprendentemente, no tienen muy buen soporte para el valor <code>fixed</code>. <a href=\"http://bradfrostweb.com/blog/mobile/fixed-position/\">Aprende más al respecto aquí</a>."
position.fixed.4: "Los buscadores móviles, sorprendentemente, no tienen muy buen soporte para el valor <code>fixed</code>. <a href=\"http://bradfrost.com/blog/mobile/fixed-position/\">Aprende más al respecto aquí</a>."
position.fixed.example: "Hola! No me prestes atención todavía"
position.absolute.title: "absolute"
position.absolute.1: "<code>absolute</code> (absoluto) es el valor más mañoso. <code>absolute</code> se comporta como <code>fixed</code> pero es relativo a <em>su ancestro posicionado más cercano</em> en lugar de ser relativo a la ventana del navegador. Si un elemento con <code>position: absolute;</code> no tiene ancestros posicionados, usará el elemento body del documento, y se seguirá moviendo al hacer scroll en la página. Recuerda, un elemento \"posicionado\" es aquel cuyo valor es cualquiera excepto <code>static</code>."
Expand Down
2 changes: 1 addition & 1 deletion translations/fa.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ position.fixed.title: "fixed"
position.fixed.1: "یک عنصر با جایگذاری fixed، جایگذاری اش relative است، اما نه نسبت به عنصر پدر، بلکه نسبت به تمام صفحه، یعنی viewport، که این بدان معنی است که این عنصر همواره در جایش ثابت است، حتی اگر که صفحه scroll شود. درست مانند <code>relative</code>، صفات <code>top</code>، <code>right</code>، <code>bottom</code>، و <code>left</code> به کار می‌روند."
position.fixed.2: "حتما تا الان به عنصر ثابت گوشه ی پایین سمت راست صفحه دقت کرده اید. الان می‌توانید آن را بهتر بررسی کنید.برای آن از اید دستورات CSS استفاده شده است:"
position.fixed.3: "یک عنصر ثابت، در صفحه، در آنجایی که باید می‌بود (و از آن جا به جا شد) هیچ فضای خالی ایجاد نمی‌کند."
position.fixed.4: "مرورگر‌های موبایل، به شکل اعجاب آوری از عنصر‌های ثابت، به شکلی متنوع پشتیبانی می‌کنند. <a href=\"http://bradfrostweb.com/blog/mobile/fixed-position/\">در این باره می‌توانید در اینجا بیشر بیاموزید</a>."
position.fixed.4: "مرورگر‌های موبایل، به شکل اعجاب آوری از عنصر‌های ثابت، به شکلی متنوع پشتیبانی می‌کنند. <a href=\"http://bradfrost.com/blog/mobile/fixed-position/\">در این باره می‌توانید در اینجا بیشر بیاموزید</a>."
position.fixed.example: "سلام، هنوز لازم نیست که به من توجه کنید!"
position.absolute.title: "absolute"
position.absolute.1: "مقدار <code>absolute</code> نیز مانند حالت قبل است. با این تفاوت که جایگذاری در آن وابسته به <em>نزدیک ترین پدر جایگذاری شده</em> است و نه viewport. اگر یک عنصر با جایگذاری <code>absolute</code> هیچ پدر جایگذاری شده ای نداشته باشد، آنگاه از <code>body</code> برای جایگذاری استفاده می‌کند و با scroll کردن صفحه بالا و پایین می‌کند. دقت شود که یک عنصر جایگذاری شده، به هر عنصری گفته می‌شود که در آن position هر چیزی باشد غیر از <code>static</code>."
Expand Down
2 changes: 1 addition & 1 deletion translations/fr.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ position.fixed.title: "fixed"
position.fixed.1: "Un élément positionné en fixed est positionné par rapport a la fenêtre du navigateur, ce qui signifie qu'il reste toujours à la même place même si la page défile. De la même manière qu'avec un élément positionné en relative, nous pouvons utiliser les propriétés <code>top</code>, <code>right</code>, <code>bottom</code> et <code>left</code>."
position.fixed.2: "Je suis sûr que vous avez remarqué cet élément fixe dans le coin en bas à droite de la page. Je vous autorise à le regarder maitenant. Voici le CSS qui l'a placé là."
position.fixed.3: "Un élément positionné en fixed ne laisse aucun espace dans la page là où il aurait normallement dû se trouver."
position.fixed.4: "Les navigateurs mobiles ont, étonnement, un support très approximatif de la valeur fixed. <a href=\"http://bradfrostweb.com/blog/mobile/fixed-position/\">Apprenez en plus ici</a>."
position.fixed.4: "Les navigateurs mobiles ont, étonnement, un support très approximatif de la valeur fixed. <a href=\"http://bradfrost.com/blog/mobile/fixed-position/\">Apprenez en plus ici</a>."
position.fixed.example: "Bonjour ! Ne faites pas attention à moi pour l'instant."
position.absolute.title: "absolute"
position.absolute.1: "<code>absolute</code> est la valeur la plus délicate. <code>absolute</code> se comporte comme <code>fixed</code> sauf que son positionnement est relatif à <em>l'élément parent positionné le plus proche</em> au lieu d'être relatif à la fenêtre du navigateur. Si un élément positionné en absolute n'à aucun élément parent positionné, il utilise le corps du document et se déplace avec le document au défilement de la page. N'oubliez-pas qu'un élément \"positionné\" est un élément dont la position est tout sauf <code>static</code>."
Expand Down
2 changes: 1 addition & 1 deletion translations/hy.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ position.fixed.title: "fixed"
position.fixed.1: "A fixed element is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. As with <code>relative</code>, the <code>top</code>, <code>right</code>, <code>bottom</code>, and <code>left</code> properties are used."
position.fixed.2: "I'm sure you've noticed that fixed element in the lower-right hand corner of the page. I'm giving you permission to pay attention to it now. Here is the CSS that puts it there:"
position.fixed.3: "A fixed element does not leave a gap in the page where it would normally have been located."
position.fixed.4: "Mobile browsers have surprisingly shaky support for fixed. <a href=\"http://bradfrostweb.com/blog/mobile/fixed-position/\">Learn more about the situation here</a>."
position.fixed.4: "Mobile browsers have surprisingly shaky support for fixed. <a href=\"http://bradfrost.com/blog/mobile/fixed-position/\">Learn more about the situation here</a>."
position.fixed.example: "Hello! Don't pay attention to me yet."
position.absolute.title: "absolute"
position.absolute.1: "<code>absolute</code> is the trickiest position value. <code>absolute</code> behaves like <code>fixed</code> except relative to <em>the nearest positioned ancestor</em> instead of relative to the viewport. If an absolutely-positioned element has no positioned ancestors, it uses the document body, and still moves along with page scrolling. Remember, a \"positioned\" element is one whose position is anything except <code>static</code>."
Expand Down
2 changes: 1 addition & 1 deletion translations/it.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ position.fixed.title: "fixed"
position.fixed.1: "Un elemento fisso è posizionato relativamente all'area visualizzata della finestra, il che significa che rimarrà sempre nello stesso posto anche quando la pagina viene scorsa. Così come per <code>relative</code>, vengono utilizzate le proprietà <code>top</code>, <code>right</code>, <code>bottom</code>, e <code>left</code>."
position.fixed.2: "Son sicuro che avrai notato l'elemento fisso nell'angolo in basso a destra della pagina. Ora hai il mio permesso di prestargli attenzione. Qui il codice CSS che lo posiziona laggiù:"
position.fixed.3: "Un elemento fisso non lascia del vuoto nel punto della pagina in cui normalmente sarebbe dovuto essere."
position.fixed.4: "I browser dei dispositivi mobile hanno un supporto soprendentemente traballante per <code>fixed</code>. <a href=\"http://bradfrostweb.com/blog/mobile/fixed-position/\">Scopri di più sulla situazione qua</a>."
position.fixed.4: "I browser dei dispositivi mobile hanno un supporto soprendentemente traballante per <code>fixed</code>. <a href=\"http://bradfrost.com/blog/mobile/fixed-position/\">Scopri di più sulla situazione qua</a>."
position.fixed.example: "Ciao! Non prestarmi attenzione ancora."
position.absolute.title: "absolute"
position.absolute.1: "<code>absolute</code> è il valore di position più complicato. <code>absolute</code> si comporta come fixed tranne per il fatto che si riferisce al <em>più vicino elemento di livello superiore posizionato</em> invece che alla porzione di finestra visibile. Se un elemento posizionato in maniera assoluta non ha un elemento di livello superiore posizionato, utilizza il body del documento, e comunque si muoverà insieme allo scorrimento della pagina. Ricorda, gli elementi \"posizionati\" sono quelli che hanno un qualsiasi valore di position tranne <code>static</code>."
Expand Down
2 changes: 1 addition & 1 deletion translations/ja.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ position.fixed.title: "fixed"
position.fixed.1: "fiexdな要素は、viewportに対する相対位置で配置される。つまり、ページがスクロールされても、いつでも同じ場所に配置されるという事だ。<code>relative</code>と同様に、<code>top</code>、<code>right</code>、<code>bottom</code>や<code>left</code>プロパティが使われる。"
position.fixed.2: "このページの右下の角にfixedな要素がある。既に君は気づいて、気づかないふりをしていたに違いない。だが、ここではそれに気づく許可をあげよう。これが適用しているCSSだ:"
position.fixed.3: "fixedな要素は、relativeな要素と異なり、元々の表示位置からの調整により生じた隙間にも自動的に他のコンテンツが配置され得る。"
position.fixed.4: "ただし、モバイルブラウザは、fixedに対して、驚くほどイマイチなサポートしかしていない。<a href=\"http://bradfrostweb.com/blog/mobile/fixed-position/\">もっと詳しい状況を知りたければここ</a>を参照しよう。"
position.fixed.4: "ただし、モバイルブラウザは、fixedに対して、驚くほどイマイチなサポートしかしていない。<a href=\"http://bradfrost.com/blog/mobile/fixed-position/\">もっと詳しい状況を知りたければここ</a>を参照しよう。"
position.fixed.example: "Hello! まだ私のことは気にしないでね。"
position.absolute.title: "absolute"
position.absolute.1: "<code>absolute</code>は最も扱いにくい。<code>absolute</code>は<code>fixed</code>とほぼ同等である。だが、viewportからの相対位置の代わりに、<em>位置指定有効かつ最も近い世代の祖先要素</em>からの相対位置に配置されるという点が異なる。位置指定有効な要素の祖先を持たなければ、absoluteな要素はdocumentのbodyからの相対位置に配置されるし、ページスクロールで動きもする。 \"位置指定有効な\"要素は<code>static</code>以外のいずれかの値が指定された場合であったことを思い出してほしい。"
Expand Down
2 changes: 1 addition & 1 deletion translations/ko.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ position.fixed.title: "fixed"
position.fixed.1: "고정(fixed) 엘리먼트는 뷰포트(viewport)에 상대적으로 위치가 지정되는데, 이는 페이지가 스크롤되더라도 늘 같은 곳에 위치한다는 뜻입니다. <code>relative</code>와 마찬가지로 <code>top</code>이나 <code>right</code>, <code>bottom</code>, <code>left</code> 프로퍼티가 사용됩니다."
position.fixed.2: "페이지의 우측 하단 구석에 고정된 엘리먼트가 있다는 사실을 눈치채셨을 겁니다. 이 엘리먼트를 눈여겨보세요. 다음은 이 엘리먼트를 그 자리에 놓이게 만든 CSS 코드입니다."
position.fixed.3: "고정 엘리먼트는 평소대로라면 있었을 법한 공백을 페이지에 남기지 않습니다."
position.fixed.4: "모바일 브라우저의 경우 고정 엘리먼트 지원이 굉장히 불안정합니다. <a href=\"http://bradfrostweb.com/blog/mobile/fixed-position/\">이와 관련된 사항은 이곳에서 좀 더 자세히 확인하실 수 있습니다</a>."
position.fixed.4: "모바일 브라우저의 경우 고정 엘리먼트 지원이 굉장히 불안정합니다. <a href=\"http://bradfrost.com/blog/mobile/fixed-position/\">이와 관련된 사항은 이곳에서 좀 더 자세히 확인하실 수 있습니다</a>."
position.fixed.example: "안녕하세요! 아직은 저한테 관심을 보이지 마세요."
position.absolute.title: "absolute"
position.absolute.1: "<code>absolute</code>는 가장 다루기 까다로운 위치 지정 값입니다. <code>absolute</code>는 뷰포트에 상대적으로 위치가 지정되는 게 아니라 <em>가장 가까운 곳에 위치한 조상 엘리먼트</em>에 상대적으로 위치가 지정된다는 점을 제외하면 <code>fixed</code>와 비슷하게 동작합니다. 절대 위치가 지정된 엘리먼트가 기준으로 삼는 조상 엘리먼트가 없으면 문서 본문(document body)을 기준으로 삼고, 페이지 스크롤에 따라 움직입니다. \"위치가 지정된\" 엘리먼트는 <code>position</code>이 <code>static</code>으로 지정되지 않은 엘리먼트를 가리킨다는 사실을 기억하세요."
Expand Down
Loading