Вопросы Теги

Как Вы выбираете платформу CSS? [закрытый]

Политика одного и того же происхождения
Не путать с CORS !
Вы не можете получить доступ к </code> с разным началом с использованием JavaScript, это было бы огромным недостатком безопасности, если бы вы могли это сделать. Для браузеров <a href="https://legkovopros.ru/go.php?url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FSecurity%2FSame-origin_policy" rel="noreferrer" target="_parent"> того же происхождения </a> блокируют сценарии, пытающиеся получить доступ к кадру с другим происхождением. </p><p> Происхождение считается другим, если не поддерживается хотя бы одна из следующих частей адреса: </p><pre class="lang-none prettyprint-override"><code><protocol>://<hostname>:<port>/path/to/page.html </code></pre><p> Протокол, имя хоста и порт должны быть одинаковыми для вашего домена, если вы хотите получить доступ к кадру. </p><h3> Примеры </h3><p> Вот что произойдет, пытаясь получить доступ к следующим URL-адресам из <code>http://www.example.com/home/index.html</code> </p><pre class="lang-none prettyprint-override"><code>URL RESULT http://www.example.com/home/other.html -> Success http://www.example.com/dir/inner/another.php -> Success http://www.example.com:80 -> Success (default port for HTTP) http://www.example.com:2251 -> Failure: different port http://data.example.com/dir/other.html -> Failure: different hostname https://www.example.com/home/index.html.html -> Failure: different protocol ftp://www.example.com:21 -> Failure: different protocol & port https://google.com/search?q=james+bond -> Failure: different hostname & protocol </code></pre><h2> Обходное решение </h2><p> -origin блокирует скрипты от доступа к содержимому сайтов с другим происхождением, если у вас есть обе страницы, вы можете обойти эту проблему, используя <a href="https://legkovopros.ru/go.php?url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FAPI%2FWindow%2FpostMessage" rel="noreferrer" target="_parent"> <code>window.postMessage</code> </a> и ее относительное <code>message</code> событие для отправки сообщений между двумя страницами, например: </p><ul><li> На главной странице: <pre><code>var frame = document.getElementById('your-frame-id'); frame.contentWindow.postMessage(/any variable or object here/, ''); </code></pre> </li> <li> На вашем <code><iframe></code> (см. основную страницу): <pre><code>window.addEventListener('message', function(event) { // IMPORTANT: Check the origin of the data! if (~event.origin.indexOf('http://yoursite.com')) { // The data has been sent from your site // The data sent with postMessage is stored in event.data console.log(event.data); } else { // The data hasn't been sent from your site! // Be careful! Do not use it. return; } }); </code></pre> </li> </ul><p> Этот метод может применяться в обоих направлениях, создавая слушателя на главной странице и получая ответы от фрейма. Та же логика также может быть реализована во всплывающих окнах и в основном в любом новом окне, создаваемом главной страницей (например, с использованием <a href="https://legkovopros.ru/go.php?url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FAPI%2FWindow%2Fopen" rel="noreferrer" target="_parent"> <code>window.open()</code> </a>), без какой-либо разницы. </p><h2> Отключение политика того же происхождения в <em> браузере </em> </h2><p> Уже есть некоторые хорошие ответы на эту тему (я просто нашел их googling), поэтому для браузеров, где это возможно, ll ссылку относительный ответ. Однако помните, что отключение политики одного и того же происхождения (или CORS) повлияет только на <em> на ваш браузер </em>. Кроме того, при запуске браузера с настройками безопасности с одинаковым исходным кодом отключены <em> доступ к веб-сайту </em> для ресурсов с перекрестными источниками, поэтому он очень опасен и должен выполняться только для целей разработки. </p><ul><li> <a href="https://legkovopros.ru/questions/89553/otkljuchit-tu-zhe-politiku-proishozhdenija-v-chrome" target="_parent"> Google Chrome </a> </li> <li> <a href="https://stackoverflow.com/questions/17088609/disable-firefox-same-origin-policy" target="_parent"> Mozilla Firefox </a> </li> <li> Apple Safari: невозможно, <a href="https://stackoverflow.com/a/38228168/3889449" target="_parent"> только CORS </a>. </li> <li> Opera: невозможно. </li> <li> Microsoft Edge: невозможно. </li> <li> Microsoft Internet Explorer: невозможно, <a href="https://stackoverflow.com/questions/20947359/disable-same-origin-policy-internet-explorer" target="_parent"> только CORS </a>. </li> </ul></h2> </div> <div class="votes-question"> <div class="vote-count" itemprop="upvoteCount">18</div><i class="fa fa-thumbs-o-up"></i> </div> <div class="tags"> <a href="/questions/tagged/frameworks" class="tag" title="frameworks" rel="tag">frameworks</a> <a href="/questions/tagged/css" class="tag" title="css" rel="tag">css</a> </div> <div class="clearfix"></div> <div class="action-time"> задан SteD <span title="15 March 2009 в 14:05 ">15 March 2009 в 14:05 </span> </div> <a class="s-link" href="/questions/124542/kak-vy-vybiraete-platformu-css-zakrytyj" title="поделиться">поделиться</a> </div> </div> <div style="height:100px;margin:10px 0px;" class=""> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>  <ins class="adsbygoogle" style="display:block;height:100px" data-ad-client="ca-pub-2355906945027976" data-ad-slot="" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="answers" id="answers"> <h2 class="pull-left"><span itemprop="answerCount">6</span> ответов</h2> <div class="clearfix"></div> <div class="answer-pager"> <div class="pagination"> </div> </div> <div class="answer accepted" id="308691" itemscope="" itemtype="http://schema.org/Answer" itemprop="acceptedAnswer"> <div class="answer-row"> <div class="answer-text"> <div class="description" itemprop="text"> <p> Во-первых, только автоматически предположите, что платформа CSS необходима, или даже желательна. В зависимости от того, что Вы делаете и насколько хороший Вы в разметке + CSS, это не может стоить того. Статья <a href="http://en.wikipedia.org/wiki/CSS_framework" rel="noreferrer"> </a>Wikipedia едва царапает поверхность дебатов, которые я видел онлайн, например, этот <a href="http://www.elliotswan.com/2006/05/10/yui-grids-css-framework-considered-harmful/" rel="noreferrer"> критика платформы Сеток YUI </a>. </p> <p>, Если Вы решили, что платформа CSS для Вас, тогда необходимо решить, какие проблемы она будет решать для Вас. Как только у Вас есть тот список, можно начать сравнивать различные, чтобы видеть, как хорошо они решают проблемы. </p> <p> Наконец, существует любой ряд незначительных факторов, которые могут сместить баланс для Вашего конкретного приложения. Уже с помощью YUI на сайте? Тогда <a href="http://developer.yahoo.com/yui/reset/" rel="noreferrer"> Сброс </a>, <a href="http://developer.yahoo.com/yui/base/" rel="noreferrer"> Основа </a>, <a href="http://developer.yahoo.com/yui/fonts/" rel="noreferrer"> Шрифты </a>, и <a href="http://developer.yahoo.com/yui/grids/" rel="noreferrer"> Сетки </a> комбинация может получить удар, и т.д. </p> <p> два я видел, что ссылкой чаще всего является YUI's, и <a href="http://www.blueprintcss.org/" rel="noreferrer"> BluePrintCSS</a> (вот <a href="http://foohack.com/2007/08/blueprint-css-framework-vs-yui-grids/" rel="noreferrer"> сравнение </a>). </p> <p> ОБНОВЛЕНИЕ: Одна вещь, которую я не видел явно обращенный платформой CSS, <a href="http://www.alistapart.com/articles/settingtypeontheweb" rel="noreferrer"> Тип Установки в сети к Сетке базовых линий </a> (см. этот <a href="http://24ways.org/2006/compose-to-a-vertical-rhythm" rel="noreferrer"> статья о создании к вертикальному ритму </a> для получения дополнительной информации). </p> </div> <div class="votes-answer green"> <div class="vote-count" itemprop="upvoteCount">11</div><i class="fa fa-thumbs-o-up"></i> </div> <div class="clearfix"></div> <div class="action-time"> ответ дан <span title="30 November 2019 в 08:33 ">30 November 2019 в 08:33 </span> </div> <a class="s-link" href="/questions/124542/kak-vy-vybiraete-platformu-css-zakrytyj#584" title="поделиться">поделиться</a> </div> <div class="post-layout--right"> <div id="comments-308691"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> </ul> </div> </div> </div> </div> <div class="answer" id="308692" itemscope="" itemtype="http://schema.org/Answer"> <div class="answer-row"> <div class="answer-text"> <div class="description" itemprop="text"> <p> Вы идеально не делаете. </p> <p> намного более удобно создать Ваше собственное готовое, чтобы пойти CSS, а не изучить запутанность платформы. YMMV, но я нашел их пустой тратой времени. </p> </div> <div class="votes-answer green"> <div class="vote-count" itemprop="upvoteCount">6</div><i class="fa fa-thumbs-o-up"></i> </div> <div class="clearfix"></div> <div class="action-time"> ответ дан <span title="30 November 2019 в 08:33 ">30 November 2019 в 08:33 </span> </div> <a class="s-link" href="/questions/124542/kak-vy-vybiraete-platformu-css-zakrytyj#584" title="поделиться">поделиться</a> </div> <div class="post-layout--right"> <div id="comments-308692"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> </ul> </div> </div> </div> </div> <div class="answer" id="308693" itemscope="" itemtype="http://schema.org/Answer"> <div class="answer-row"> <div class="answer-text"> <div class="description" itemprop="text"> <p> Afaik, два из большей части populars <a href="http://www.blueprintcss.org/" rel="nofollow noreferrer"> проект </a> и <a href="http://960.gs/" rel="nofollow noreferrer"> 960 объединенных энергосистем </a>. <br> у Обоих есть их преимущества. Мне нравится 960gs. </p> <p> существует другой ТАК вопрос, дебатируя два <a href="https://stackoverflow.com/questions/589184/help-me-choose-a-css-framework-960-vs-blueprint-vs/"> здесь </a> </p> </div> <div class="votes-answer green"> <div class="vote-count" itemprop="upvoteCount">3</div><i class="fa fa-thumbs-o-up"></i> </div> <div class="clearfix"></div> <div class="action-time"> ответ дан <span title="30 November 2019 в 08:33 ">30 November 2019 в 08:33 </span> </div> <a class="s-link" href="/questions/124542/kak-vy-vybiraete-platformu-css-zakrytyj#584" title="поделиться">поделиться</a> </div> <div class="post-layout--right"> <div id="comments-308693"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> </ul> </div> </div> </div> </div> <div class="answer" id="308694" itemscope="" itemtype="http://schema.org/Answer"> <div class="answer-row"> <div class="answer-text"> <div class="description" itemprop="text"> <p> Если Вы должны создать сложную сетку без ограничения ширины по умолчанию, жидкие и фиксированные столбцы, легкий вес, сетку базовых линий, дополнительный semanic, % и расположили базирующуюся сетку, мой совет является использованием мой <a href="http://code.google.com/p/emastic/" rel="nofollow noreferrer"> CSS платформа Emastic </a>. </p> <p> при необходимости в чем-то дополнительном, простом, можно использовать <a href="http://code.google.com/p/malo/" rel="nofollow noreferrer"> Malo</a> или что-то подобное для Светокопирования или 960.gs, но вес только 1 КБ <a href="http://code.google.com/p/the-golden-grid/" rel="nofollow noreferrer"> Золотая Сетка </a>. Будьте осторожны не всегда, CSS Платформа является хорошей идеей. Я также записал одно сообщение приблизительно <a href="http://www.vcarrer.com/2008/08/when-to-use-css-framework.html" rel="nofollow noreferrer">, Когда использовать платформу CSS </a>? </p> </div> <div class="votes-answer green"> <div class="vote-count" itemprop="upvoteCount">2</div><i class="fa fa-thumbs-o-up"></i> </div> <div class="clearfix"></div> <div class="action-time"> ответ дан <span title="30 November 2019 в 08:33 ">30 November 2019 в 08:33 </span> </div> <a class="s-link" href="/questions/124542/kak-vy-vybiraete-platformu-css-zakrytyj#584" title="поделиться">поделиться</a> </div> <div class="post-layout--right"> <div id="comments-308694"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> </ul> </div> </div> </div> </div> <div class="answer" id="308695" itemscope="" itemtype="http://schema.org/Answer"> <div class="answer-row"> <div class="answer-text"> <div class="description" itemprop="text"> <p> <a href="http://acts-as-architect.blogspot.com/2008/11/introducing-compass.html" rel="nofollow noreferrer"> Компас </a> является интересно выглядящей платформой CSS. Это может выполнить проект использования, 960.gs, YUI и вероятно другие как основание, но просто втягивает то, что необходимо для Вашего проекта. </p> </div> <div class="votes-answer green"> <div class="vote-count" itemprop="upvoteCount">1</div><i class="fa fa-thumbs-o-up"></i> </div> <div class="clearfix"></div> <div class="action-time"> ответ дан <span title="30 November 2019 в 08:33 ">30 November 2019 в 08:33 </span> </div> <a class="s-link" href="/questions/124542/kak-vy-vybiraete-platformu-css-zakrytyj#584" title="поделиться">поделиться</a> </div> <div class="post-layout--right"> <div id="comments-308695"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> </ul> </div> </div> </div> </div> <div class="answer" id="308696" itemscope="" itemtype="http://schema.org/Answer"> <div class="answer-row"> <div class="answer-text"> <div class="description" itemprop="text"> <p> Я все еще должен разносторонне развить свой опыт с платформами CSS, но тот, который я работал с большинством, <a href="http://developer.yahoo.com/yui/grids/" rel="nofollow noreferrer"> библиотека YUI CSS </a>. </p> <p> Это - четыре установки части - состоящий из сброса, пакета сеток, установка шрифтов (не совсем уверенный, что профессионалы использования, которые являются) и основная таблица стилей, которая применяет некоторое основное форматирование. Можно выбрать, какие части Вы хотите использовать, и они доступны для использования от <a href="http://developer.yahoo.com/yui/articles/hosting/" rel="nofollow noreferrer"> CDN на Yahoo! и Google </a>. </p> <p>, мне нравится библиотека YUI, потому что это обеспечивает легко переключаемое расположение (только путем изменения одного класса, или идентификатор контейнерной обертки) - например <code>yui-t4</code> предоставляет столбец на 180 пкс справа, <code>yui-t3</code> предоставляет столбец на 300 пкс слева - эти шаблоны также берут размеры блока рекламы также, который полезен. </p> <p> основная разметка не слишком плоха также: </p> <pre><code><div id="doc"><!—-overall document wrapper--> <div id="hd"></div> <div id="bd"> <div id="yui-main"> <div class="yui-b"></div> </div> <div class="yui-b"></div> </div> <div id="ft"></div> </div> </code></pre> </div> <div class="votes-answer"> <div class="vote-count" itemprop="upvoteCount">0</div><i class="fa fa-thumbs-o-up"></i> </div> <div class="clearfix"></div> <div class="action-time"> ответ дан <span title="30 November 2019 в 08:33 ">30 November 2019 в 08:33 </span> </div> <a class="s-link" href="/questions/124542/kak-vy-vybiraete-platformu-css-zakrytyj#584" title="поделиться">поделиться</a> </div> <div class="post-layout--right"> <div id="comments-308696"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> </ul> </div> </div> </div> </div> <div style="margin-top: 20px;"> Другие вопросы по тегам: <div class="tags" style="display: inline-block; float: none;"> <a href="/questions/tagged/frameworks" class="tag" title="frameworks" rel="tag">frameworks</a> <a href="/questions/tagged/css" class="tag" title="css" rel="tag">css</a> </div> <h3 class="m-t-20">Похожие вопросы:</h3> <div class="related-block"> <ul> <li><div class='votes-answer green'><span class='vote-count'>55</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/87787/pochemu-by-ne-ispolzovat-tablicy-dlja-razmetki-v-html-zakryto" title="Почему бы не использовать таблицы для разметки в HTML? [закрыто]">Почему бы не использовать таблицы для разметки в HTML? [закрыто]</a> - 6 November 2018 00:07 </li> <li><div class='votes-answer green'><span class='vote-count'>36</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/90066/kak-sdelat-div-ne-bolshe-ego-soderzhimogo" title="Как сделать div не больше его содержимого?">Как сделать div не больше его содержимого?</a> - 20 September 2015 12:27 </li> <li><div class='votes-answer green'><span class='vote-count'>30</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/2043/ispol-zovanie-shiriny-vidovy-x-e-kranov-dlya-razmera-shrifta-kak-ya-mogu-ubedit-sya-chto-oni-otnosyatsya-k-roditel-skomu-kontejn" title="Использование ширины видовых экранов для размера шрифта, как я могу убедиться, что они относятся к родительскому контейнеру, а не к окну просмотра? [Дубликат] ">Использование ширины видовых экранов для размера шрифта, как я могу убедиться, что они относятся к родительскому контейнеру, а не к окну просмотра? [Дубликат] </a> - 30 June 2016 03:39 </li> <li><div class='votes-answer green'><span class='vote-count'>30</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/11689/poluchite-div-chtoby-prinyat-100-rost-minus-zagolovok-avtomaticheskoj-vy-soty-dublikat" title="Получите div, чтобы принять 100% рост, минус заголовок автоматической высоты [дубликат] ">Получите div, чтобы принять 100% рост, минус заголовок автоматической высоты [дубликат] </a> - 15 July 2015 15:37 </li> <li><div class='votes-answer green'><span class='vote-count'>30</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/12619/ustanovite-peremennuyu-dlinu-teksta-na-fiksirovannuyu-shirinu-kontejnera-s-pomoshh-yu-cz-z-i-bez-javaz-cript-duplicate" title="Установите переменную длину текста на фиксированную ширину контейнера с помощью CSS и без JavaScript [duplicate] ">Установите переменную длину текста на фиксированную ширину контейнера с помощью CSS и без JavaScript [duplicate] </a> - 30 June 2016 03:39 </li> <li><div class='votes-answer green'><span class='vote-count'>30</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/3875/chto-mne-ne-xvataet-chtoby-sosredotochit-e-tot-div-izobrazheniya-dublikat" title="Что мне не хватает, чтобы сосредоточить этот div / изображения? [Дубликат] ">Что мне не хватает, чтобы сосредоточить этот div / изображения? [Дубликат] </a> - 6 July 2018 20:42 </li> <li><div class='votes-answer green'><span class='vote-count'>30</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/25182/div-chtoby-zapolnit-vy-sotu-roditel-skogo-duplicate" title="div, чтобы заполнить высоту родительского [duplicate] ">div, чтобы заполнить высоту родительского [duplicate] </a> - 15 July 2015 15:37 </li> </ul> </div> </div> </div> </div> </div> <aside class="sidebar"> <div class="awrap"> <script async src="https://yastatic.net/pcode-native/loaders/loader.js"></script> <script> (yaads = window.yaads || []).push({ id: "553274-2", render: "#id-553274-2" }); </script> <div id="id-553274-2"></div> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:inline-block;width:300px;height:600px" data-ad-client="ca-pub-2355906945027976" data-ad-slot="8038370725"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </aside> </div> </div> <footer class="footer"> <div class="wrapper wrapper--sm"> <div class="footer-navs-col"> <div class="footer-nav footer-nav--menu"> <div class="footer-coryright">© 2017 - 2020 Вопросы и ответы по программированию</div> </div> <div class="footer-nav footer-nav--catalog"> </div> </div> <div class="footer-contacts-col"> <div class="soc-widget-col"> </div> </div> <div class="clearfix"></div> </div> </footer> </div> <script type="text/javascript" src="/js/ui/jquery-ui-1.8.16.custom.min.js"></script> <script type="text/javascript" src="/js/ui/external/jquery.cookie.js"></script> <script type="text/javascript" src="/js/versions/menu.ru.u1607887878.js"></script> <script type="text/javascript" src="/js/jquery.fancybox.min.js"></script> <script type="text/javascript" src="/js/slick.min.js"></script> <script type="text/javascript" src="/js/jquery.maskedinput.min.js"></script> <script type="text/javascript" src="/js/versions/scripts.ru.u1607887878.js"></script>  <script type="text/javascript" > (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; var z = null;m[i].l=1new Date(); for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }} k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(90030325, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/90030325" style="position:absolute; left:-9999px;" alt="" /></div></noscript>   <script async src="https://www.googletagmanager.com/gtag/js?id=UA-123993370-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-123993370-1'); </script> </div> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "WebSite", "name": "Программирование - вопросы и ответы", "alternateName": "Программирование - вопросы и ответы", "url": "https://legkovopros.ru", "potentialAction": { "@type": "SearchAction", "target": "https://legkovopros.ru/search?search={search_term_string}", "query-input": "required name=search_term_string" } } { "@context": "https://schema.org", "@type": "Organization", "name": "Программирование - вопросы и ответы", "url": "https://legkovopros.ru", "logo": "https://legkovopros.ru/i/logo.png", "email": "info@legkovopros.ru", "telephone": "" } </script> </body> </html>